Skip to content

UI refactor P1: OverlayManager - one owner for every popup/dialog lifecycle #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dovvnloading merged 2 commits into from
Jul 22, 2026
Merged

UI refactor P1: OverlayManager - one owner for every popup/dialog lifecycle #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e05ef7
UI refactor P0: design-token foundation + full hex/font sweep behind …
dovvnloading Jul 22, 2026
e46d573
UI refactor P1: OverlayManager - one owner for every popup/dialog lif…
dovvnloading Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions assets/toolbar/assets/index-Ds23m8jz.js
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 0 additions & 40 deletions assets/toolbar/assets/index-DwVg4wwn.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion assets/toolbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1a1a1a" />
<title>Graphlink Toolbar</title>
<script type="module" crossorigin src="./assets/index-DwVg4wwn.js"></script>
<script type="module" crossorigin src="./assets/index-Ds23m8jz.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CVmgmu76.css">
</head>
<body>
Expand Down
22 changes: 11 additions & 11 deletions graphlink_app/graphlink_canvas/graphlink_canvas_base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
from PySide6.QtCore import Qt, QRectF, QTimer, Signal
from PySide6.QtGui import QPainter, QColor, QBrush, QPen

from graphlink_config import get_current_palette
from graphlink_config import get_current_palette, get_surface_color


class HoverAnimationMixin:
Expand Down Expand Up @@ -145,19 +145,19 @@ def __init__(self, parent=None):
self.setAlignment(Qt.AlignmentFlag.AlignLeft | Qt.AlignmentFlag.AlignVCenter)
self.setAttribute(Qt.WidgetAttribute.WA_StyledBackground, True)
self.setStyleSheet(
"""
QLineEdit {
f"""
QLineEdit {{
background-color: rgba(26, 26, 26, 0.96);
color: #f1f1f1;
border: 1px solid #5a5a5a;
color: {get_surface_color("text_strong")};
border: 1px solid {get_surface_color("handle")};
border-radius: 5px;
padding: 4px 8px;
selection-background-color: #5a5a5a;
selection-color: #ffffff;
}
QLineEdit:focus {
border-color: #7a7a7a;
}
selection-background-color: {get_surface_color("handle")};
selection-color: {get_surface_color("text_bright")};
}}
QLineEdit:focus {{
border-color: {get_surface_color("text_muted")};
}}
"""
)
self.editingFinished.connect(self._emit_commit_if_needed)
Expand Down
25 changes: 13 additions & 12 deletions graphlink_app/graphlink_canvas/graphlink_canvas_chart_item.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
from PySide6.QtCore import Qt, QRectF, QPointF, QSizeF, QTimer, QStandardPaths
from PySide6.QtGui import QPainter, QColor, QBrush, QPen, QFont, QPainterPath, QImage, QLinearGradient

from graphlink_config import get_current_palette, get_graph_node_colors
from graphlink_config import get_current_palette, get_graph_node_colors, get_surface_color
from graphlink_chart_data import ChartDataError, canonicalize_chart_data
from graphlink_context_menu import create_context_menu
from graphlink_styles import FONT_FAMILY_NAME


class ChartItem(QGraphicsItem):
Expand Down Expand Up @@ -79,9 +80,9 @@ def __init__(self, data, pos, parent=None, parent_content_node=None):
self.aspect_ratio_locked = True
self._base_aspect_ratio = self.DEFAULT_WIDTH / self.DEFAULT_HEIGHT
self.resize_start_aspect_ratio = self._base_aspect_ratio
self.font_family = "Segoe UI"
self.font_family = FONT_FAMILY_NAME
self.font_size = 10
self.font_color = QColor("#DDDDDD")
self.font_color = QColor(get_surface_color("text_primary"))

self.figure = Figure(figsize=(6, 4), dpi=160)
self.canvas = FigureCanvasAgg(self.figure)
Expand Down Expand Up @@ -216,12 +217,12 @@ def _mpl_rgba(color, alpha=1.0):
return (color.redF(), color.greenF(), color.blueF(), alpha)

def _build_theme(self, palette):
surface = QColor("#1B1B1B")
panel = QColor("#151515")
border = QColor("#474747")
text = QColor("#F7F7F7")
muted = QColor("#A5A5A5")
grid = QColor("#9A9A9A")
surface = QColor(get_surface_color("window"))
panel = QColor(get_surface_color("inset_deep"))
border = QColor(get_surface_color("divider"))
text = QColor(get_surface_color("text_bright"))
muted = QColor(get_surface_color("text_label"))
grid = QColor(get_surface_color("text_label"))
primary = QColor(palette.AI_NODE)
secondary = QColor(palette.USER_NODE)
selection = QColor(palette.SELECTION)
Expand Down Expand Up @@ -810,7 +811,7 @@ def _render_chart_content(self, theme):
return self.chart_image

def update_font_settings(self, family, size, color):
self.font_family = str(family or "Segoe UI")
self.font_family = str(family or FONT_FAMILY_NAME)
self.font_size = max(6, min(32, int(size)))
self.font_color = QColor(color)
self.generate_chart()
Expand Down Expand Up @@ -925,7 +926,7 @@ def paint(self, painter, option, widget=None):
painter.drawText(header_rect.adjusted(12, 0, -120, 0), Qt.AlignmentFlag.AlignVCenter, self.title)

badge_rect = QRectF(self.width - 102, 8, 90, 24)
painter.setPen(QPen(self._with_alpha(QColor("#FFFFFF"), 65), 1))
painter.setPen(QPen(self._with_alpha(QColor(get_surface_color("text_bright")), 65), 1))
painter.setBrush(QBrush(node_colors["badge_fill"]))
painter.drawRoundedRect(badge_rect, 12, 12)
painter.setPen(QPen(self.font_color))
Expand All @@ -943,7 +944,7 @@ def paint(self, painter, option, widget=None):
if self.hovered or self.isSelected():
handle_size = 10
handle_rect = QRectF(self.width - handle_size, self.height - handle_size, handle_size, handle_size)
painter.setPen(QPen(QColor("#FFFFFF")))
painter.setPen(QPen(QColor(get_surface_color("text_bright"))))
painter.drawLine(handle_rect.topLeft(), handle_rect.bottomRight())
painter.drawLine(
handle_rect.topLeft() + QPointF(0, handle_size / 2),
Expand Down
22 changes: 15 additions & 7 deletions graphlink_app/graphlink_canvas/graphlink_canvas_container.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,15 @@

from .graphlink_canvas_base import CanvasHeaderLineEdit, GhostFrame, update_connections_for_items
from .graphlink_canvas_dialogs import ColorPickerDialog
from graphlink_config import canvas_font, get_current_palette, get_graph_node_colors
from graphlink_config import canvas_font, get_current_palette, get_graph_node_colors, get_surface_color

# The container's user-facing body color DEFAULT. Persisted scene DATA (saved
# into and restored from chat JSON, see graphlink_session/serializers +
# deserializers), not theme chrome - deliberately NOT a THEME_TOKENS lookup:
# a saved container must keep its color across theme switches, exactly like
# DEFAULT_GRID_COLOR in graphlink_grid_view_settings. The one allowed literal
# home for this value (see tests/test_ui_token_acceptance.py's allowlist).
DEFAULT_CONTAINER_COLOR = "#3a3a3a"


class Container(QGraphicsItem):
Expand Down Expand Up @@ -46,7 +54,7 @@ def __init__(self, items, parent=None):
self.expanded_rect = QRectF() # Caches the size before collapsing.

self.rect = QRectF()
self.color = "#3a3a3a"
self.color = DEFAULT_CONTAINER_COLOR
self.header_color = None

# Rects for hover detection of UI buttons in the header.
Expand Down Expand Up @@ -351,7 +359,7 @@ def paint(self, painter, option, widget=None):
self.collapse_button_rect = QRectF(self.rect.right() - 34, self.rect.top() + 10, 24, 24)

# Draw the title text in collapsed mode.
painter.setPen(QColor("#ffffff"))
painter.setPen(QColor(get_surface_color("text_bright")))
font = canvas_font(self.scene(), delta=2, weight=QFont.Weight.Bold)
painter.setFont(font)
title_rect = QRectF(self.rect.left() + 14, self.rect.top(), self.rect.width() - 56, self.rect.height())
Expand All @@ -360,7 +368,7 @@ def paint(self, painter, option, widget=None):

expand_icon = qta.icon(
'fa5s.expand-arrows-alt',
color='#ffffff' if self.collapse_button_hovered or self.hovered else '#9a9a9a',
color=get_surface_color("text_bright") if self.collapse_button_hovered or self.hovered else get_surface_color("text_label"),
)
expand_icon.paint(painter, self.collapse_button_rect.adjusted(3, 3, -3, -3).toRect())
return
Expand Down Expand Up @@ -407,7 +415,7 @@ def paint(self, painter, option, widget=None):
icon.paint(painter, self.collapse_button_rect.adjusted(4, 4, -4, -4).toRect())

# Draw Color Button
painter.setPen(QPen(QColor("#ffffff") if self.color_button_hovered else node_colors["border"]))
painter.setPen(QPen(QColor(get_surface_color("text_bright")) if self.color_button_hovered else node_colors["border"]))
painter.setBrush(QBrush(header_base_color))
painter.drawEllipse(self.color_button_rect)

Expand All @@ -419,7 +427,7 @@ def paint(self, painter, option, widget=None):
painter.drawEllipse(center + QPointF(6, 0), 2, 2)

# Draw the title, either in display or editing mode.
painter.setPen(QPen(QColor("#ffffff")))
painter.setPen(QPen(QColor(get_surface_color("text_bright"))))
font = canvas_font(self.scene(), weight=QFont.Weight.Bold)
painter.setFont(font)
text_rect = self._header_text_rect()
Expand Down Expand Up @@ -522,7 +530,7 @@ def show_color_picker(self):
if dialog.exec() == QDialog.DialogCode.Accepted:
color, color_type = dialog.get_selected_color()
if color_type == "default":
self.color = "#3a3a3a"
self.color = DEFAULT_CONTAINER_COLOR
self.header_color = None
elif color_type == "full":
self.color = color
Expand Down
36 changes: 18 additions & 18 deletions graphlink_app/graphlink_canvas/graphlink_canvas_dialogs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
QDialog, QVBoxLayout, QWidget, QHBoxLayout, QLineEdit, QLabel, QPushButton,
QGraphicsDropShadowEffect, QTextEdit, QGridLayout, QApplication
)
from graphlink_config import get_current_palette, get_semantic_color
from graphlink_config import get_current_palette, get_semantic_color, get_surface_color

class ColorPickerDialog(QDialog):
"""
Expand Down Expand Up @@ -74,7 +74,7 @@ def __init__(self, parent=None):

def create_section(title, color_type, names_list):
label = QLabel(title)
label.setStyleSheet("color: #CCCCCC; font-size: 10px; margin-top: 5px;")
label.setStyleSheet(f"color: {get_surface_color('text_soft')}; font-size: 10px; margin-top: 5px;")
main_layout.addWidget(label)

grid_layout = QGridLayout()
Expand All @@ -91,18 +91,18 @@ def create_section(title, color_type, names_list):
btn.setCursor(Qt.CursorShape.PointingHandCursor)

style = f"""
QPushButton {{ background-color: {color_data["color"]}; border: 2px solid #3F3F3F; border-radius: 14px; }}
QPushButton:hover {{ border: 2px solid #FFFFFF; }}
QPushButton {{ background-color: {color_data["color"]}; border: 2px solid {get_surface_color("border")}; border-radius: 14px; }}
QPushButton:hover {{ border: 2px solid {get_surface_color("text_bright")}; }}
"""
if color_type == "header":
style = f"""
QPushButton {{
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 {color_data["color"]}, stop:0.4 {color_data["color"]},
stop:0.41 #3F3F3F, stop:1 #3F3F3F);
border: 2px solid #3F3F3F; border-radius: 14px;
stop:0.41 {get_surface_color("border")}, stop:1 {get_surface_color("border")});
border: 2px solid {get_surface_color("border")}; border-radius: 14px;
}}
QPushButton:hover {{ border: 2px solid #FFFFFF; }}
QPushButton:hover {{ border: 2px solid {get_surface_color("text_bright")}; }}
"""
btn.setStyleSheet(style)
btn.setProperty("frame_color_data", color_data)
Expand All @@ -124,20 +124,20 @@ def create_section(title, color_type, names_list):

main_layout.addStretch()

self.setStyleSheet("""
QDialog { background: transparent; }
QWidget#colorPickerContainer { background-color: #252525; border-radius: 8px; }
QLabel#colorPickerTitle { color: #FFFFFF; font-size: 12px; font-weight: bold; }
QPushButton { background-color: #3F3F3F; border-radius: 5px; padding: 8px; }
QPushButton:hover { background-color: #555555; }
QPushButton#colorPickerCloseButton {
self.setStyleSheet(f"""
QDialog {{ background: transparent; }}
QWidget#colorPickerContainer {{ background-color: {get_surface_color("node_body")}; border-radius: 8px; }}
QLabel#colorPickerTitle {{ color: {get_surface_color("text_bright")}; font-size: 12px; font-weight: bold; }}
QPushButton {{ background-color: {get_surface_color("border")}; border-radius: 5px; padding: 8px; }}
QPushButton:hover {{ background-color: {get_surface_color("handle")}; }}
QPushButton#colorPickerCloseButton {{
background-color: transparent;
border-radius: 12px;
padding: 0px;
}
QPushButton#colorPickerCloseButton:hover {
background-color: #4A4A4A;
}
}}
QPushButton#colorPickerCloseButton:hover {{
background-color: {get_surface_color("border_strong")};
}}
""")

self.selected_color = None
Expand Down
34 changes: 17 additions & 17 deletions graphlink_app/graphlink_canvas/graphlink_canvas_frame.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

from .graphlink_canvas_base import CanvasHeaderLineEdit, update_connections_for_items
from .graphlink_canvas_dialogs import ColorPickerDialog
from graphlink_config import canvas_font, get_current_palette, get_semantic_color
from graphlink_config import canvas_font, get_current_palette, get_semantic_color, get_surface_color


class Frame(QGraphicsItem):
Expand Down Expand Up @@ -47,8 +47,8 @@ def __init__(self, nodes, parent=None):
# Load icons for the lock/unlock button.
# QtAwesome's legacy ``fa`` prefix is not installed in current releases;
# use the Font Awesome 5 solid set used by the rest of the canvas.
self.lock_icon = qta.icon('fa5s.lock', color='#ffffff')
self.unlock_icon = qta.icon('fa5s.unlock-alt', color='#ffffff')
self.lock_icon = qta.icon('fa5s.lock', color=get_surface_color("text_bright"))
self.unlock_icon = qta.icon('fa5s.unlock-alt', color=get_surface_color("text_bright"))
self.lock_icon_hover = qta.icon('fa5s.lock', color=get_semantic_color("status_info").name())
self.unlock_icon_hover = qta.icon('fa5s.unlock-alt', color=get_semantic_color("status_success").name())

Expand All @@ -57,7 +57,7 @@ def __init__(self, nodes, parent=None):
self.is_collapsed = False
self.expanded_rect = QRectF()
self.rect = QRectF()
self.color = "#2d2d2d"
self.color = get_surface_color("node_body")
self.header_color = None

self.collapse_button_rect = QRectF(0, 0, 24, 24)
Expand Down Expand Up @@ -557,7 +557,7 @@ def show_color_picker(self):
if dialog.exec() == QDialog.DialogCode.Accepted:
color, color_type = dialog.get_selected_color()
if color_type == "default":
self.color = "#2d2d2d"
self.color = get_surface_color("node_body")
self.header_color = None
elif color_type == "full":
self.color = color
Expand Down Expand Up @@ -615,7 +615,7 @@ def paint(self, painter, option, widget=None):

if self.is_collapsed:
base_color = QColor(self.color)
outline_color = palette.SELECTION if self.isSelected() else palette.AI_NODE if self.hovered else QColor("#555555")
outline_color = palette.SELECTION if self.isSelected() else palette.AI_NODE if self.hovered else QColor(get_surface_color("handle"))
path = QPainterPath()
path.addRoundedRect(self.rect, 10, 10)

Expand All @@ -627,7 +627,7 @@ def paint(self, painter, option, widget=None):
self.lock_button_rect = QRectF()
self.color_button_rect = QRectF()

painter.setPen(QPen(QColor("#ffffff")))
painter.setPen(QPen(QColor(get_surface_color("text_bright"))))
font = canvas_font(self.scene(), delta=1, weight=QFont.Weight.Bold)
painter.setFont(font)
title_rect = QRectF(self.rect.left() + 14, self.rect.top(), self.rect.width() - 56, self.rect.height())
Expand All @@ -636,7 +636,7 @@ def paint(self, painter, option, widget=None):

expand_icon = qta.icon(
'fa5s.expand-arrows-alt',
color='#ffffff' if self.collapse_button_hovered or self.hovered else '#9a9a9a',
color=get_surface_color("text_bright") if self.collapse_button_hovered or self.hovered else get_surface_color("text_label"),
)
expand_icon.paint(painter, self.collapse_button_rect.adjusted(3, 3, -3, -3).toRect())
return
Expand All @@ -653,7 +653,7 @@ def paint(self, painter, option, widget=None):
elif self.hovered:
outline_color = palette.AI_NODE
else:
outline_color = QColor("#555555")
outline_color = QColor(get_surface_color("handle"))

path = QPainterPath()
path.addRoundedRect(self.rect, 10, 10)
Expand Down Expand Up @@ -688,19 +688,19 @@ def paint(self, painter, option, widget=None):

# Draw collapse button.
self.collapse_button_rect = QRectF(self.rect.right() - 102, self.rect.top() + 8, 24, 24)
painter.setPen(QPen(QColor("#ffffff") if self.collapse_button_hovered else QColor("#555555")))
painter.setBrush(QBrush(QColor("#3f3f3f")))
painter.setPen(QPen(QColor(get_surface_color("text_bright")) if self.collapse_button_hovered else QColor(get_surface_color("handle"))))
painter.setBrush(QBrush(QColor(get_surface_color("border"))))
painter.drawEllipse(self.collapse_button_rect)
collapse_icon = qta.icon(
'fa5s.compress-arrows-alt',
color='#ffffff' if self.collapse_button_hovered else '#bbbbbb',
color=get_surface_color("text_bright") if self.collapse_button_hovered else get_surface_color("text_secondary"),
)
collapse_icon.paint(painter, self.collapse_button_rect.adjusted(4, 4, -4, -4).toRect())

# Draw lock button.
self.lock_button_rect = QRectF(self.rect.right() - 68, self.rect.top() + 8, 24, 24)
painter.setPen(QPen(palette.USER_NODE if self.lock_button_hovered else QColor("#555555")))
painter.setBrush(QBrush(QColor("#3f3f3f")))
painter.setPen(QPen(palette.USER_NODE if self.lock_button_hovered else QColor(get_surface_color("handle"))))
painter.setBrush(QBrush(QColor(get_surface_color("border"))))
painter.drawEllipse(self.lock_button_rect)
icon = self.lock_icon_hover if self.is_locked and self.lock_button_hovered else self.lock_icon if self.is_locked else self.unlock_icon_hover if self.lock_button_hovered else self.unlock_icon
icon_size = 18
Expand All @@ -711,10 +711,10 @@ def paint(self, painter, option, widget=None):

# Draw color button.
self.color_button_rect = QRectF(self.rect.right() - 34, self.rect.top() + 8, 24, 24)
painter.setPen(QPen(QColor("#ffffff") if self.color_button_hovered else QColor("#555555")))
painter.setPen(QPen(QColor(get_surface_color("text_bright")) if self.color_button_hovered else QColor(get_surface_color("handle"))))
painter.setBrush(QBrush(QColor(self.header_color if self.header_color else self.color)))
painter.drawEllipse(self.color_button_rect)
icon_color = QColor("#ffffff"); icon_color.setAlpha(180)
icon_color = QColor(get_surface_color("text_bright")); icon_color.setAlpha(180)
painter.setPen(QPen(icon_color))
circle_size, spacing = 4, 3
total_width = (circle_size * 3) + (spacing * 2)
Expand All @@ -725,7 +725,7 @@ def paint(self, painter, option, widget=None):
painter.drawEllipse(QRectF(x_pos, y_pos, circle_size, circle_size))

# Draw title (note).
painter.setPen(QPen(QColor("#ffffff")))
painter.setPen(QPen(QColor(get_surface_color("text_bright"))))
font = canvas_font(self.scene())
painter.setFont(font)
text_rect = self._header_text_rect()
Expand Down
Loading
Loading