Align settings with Figma design

Author: joshnoaddev

app.py

@@ -101,7 +101,7 @@
     friendly_connection_error,
 )
 from office_app.ui.views import StudentListView
-from office_app.ui.views.settings_view import SettingsView
+from office_app.ui.views.settings_figma_view import SettingsView
 from office_app.services.updater_service import UpdaterService
 
 def app_version_label() -> str:
@@ -1410,6 +1410,12 @@ def __init__(self, sb: Client, initial_user: str = "Joshua"):
         self.settings_view.connection_settings_requested.connect(
             self._open_connection_settings
         )
+        self.settings_view.test_connection_requested.connect(
+            self._test_settings_connection
+        )
+        self.settings_view.sync_now_requested.connect(
+            self.sync_google_sheet_now
+        )
         self.settings_view.preferences_changed.connect(
             self._apply_accessibility_preferences
         )
@@ -1446,6 +1452,9 @@ def _set_connection_state(self, text: str, state: str) -> None:
         badge = getattr(self, "connection_badge", None)
         if badge is not None:
             badge.set_state(state, text)
+        settings_view = getattr(self, "settings_view", None)
+        if settings_view is not None:
+            settings_view.set_connection_state(text, state)
 
     def _refresh_database_updated_label(self):
         if self._last_database_update_at is None:
@@ -1513,7 +1522,10 @@ def _update_page_header(self, index: int) -> None:
             4: ("Expenses", "Budget and expense history for the selected student"),
             5: ("Workbook", "Review and safely update the local master workbook"),
             6: ("Coordinators", "Contact directory for ministry coordinators"),
-            7: ("Settings", "Local workbook and appearance preferences"),
+            7: (
+                "Settings",
+                "Configure appearance, accessibility, and office connections.",
+            ),
         }
         title, subtitle = pages.get(index, ("SSM Workspace", "Student support records"))
         self.page_title_label.setText(title)
@@ -1600,6 +1612,8 @@ def _update_compact_header(self) -> None:
         self._update_page_header(self.stacked_widget.currentIndex())
         if hasattr(self, "sync_panel"):
             self.sync_panel.setFixedHeight(126 if compact else 96)
+        if hasattr(self, "settings_view"):
+            self.settings_view.set_compact(compact)
         self.page_eyebrow_label.hide()
 
     def _dashboard_greeting(self) -> str:
@@ -2094,6 +2108,9 @@ def nav_coordinators(self):
     def nav_settings(self):
         self._set_active_nav(self.btn_settings)
         self._switch_page(7)
+        self.settings_view.load_settings()
+        self.refresh_sync_status()
+        self._test_settings_connection(silent=True)
 
     def _on_user_changed(self, name):
         if not name:
@@ -2132,6 +2149,28 @@ def _open_connection_settings(self) -> None:
             ),
         )
 
+    def _test_settings_connection(self, *_args, silent=False) -> None:
+        """Test the live repository without blocking the Settings screen."""
+        self.settings_view.set_connection_state("Checking", "loading")
+
+        def connected(_rows):
+            self._mark_database_updated()
+            if not silent:
+                self.status_bar.showMessage("Database connection is working.", 4000)
+
+        def failed(error):
+            self._set_connection_state("Connection issue", "danger")
+            self.status_bar.showMessage(
+                "Could not reach the office database. Check the saved connection.",
+                7000,
+            )
+            logging.getLogger(__name__).warning(
+                "Settings connection test failed: %s",
+                str(error).strip().splitlines()[-1],
+            )
+
+        self._run_background(self.student_repository.ping, connected, failed)
+
     def _audit(self, action, entity_type, entity_id=None, details=None):
         operator = getattr(self, "_current_operator", self._initial_user)
         self._run_background(
@@ -2658,6 +2697,11 @@ def apply_status(entry):
                 )
                 self.sync_last_label.setText("No successful sync recorded")
                 self.sync_records_label.setText("—")
+                self.settings_view.set_sync_status(
+                    configured=has_token,
+                    state="Ready to sync" if has_token else "Token needed",
+                    last_sync="No successful sync recorded",
+                )
                 return
             details = entry.get("details") or {}
             self.sync_state_badge.set_state(
@@ -2672,6 +2716,19 @@ def apply_status(entry):
             self.sync_records_label.setText(
                 self._format_sync_counts(details)
             )
+            self.settings_view.set_sync_status(
+                configured=has_token,
+                state="Ready to sync" if has_token else "Token needed",
+                last_sync=self.sheet_sync_service.format_timestamp(
+                    entry.get("created_at")
+                ),
+                active_rows=int(details.get("students") or 0),
+                source=str(
+                    details.get("source")
+                    or details.get("source_sheet_name")
+                    or "SSM Masterlist / Current workbook"
+                ),
+            )
 
         def failed(error):
             self._sync_pulse.stop()
@@ -2681,6 +2738,11 @@ def failed(error):
             self.sync_state_badge.set_state("warning", "Status unavailable")
             self.sync_last_label.setText("Could not read the audit log")
             self.sync_records_label.setText("—")
+            self.settings_view.set_sync_status(
+                configured=bool(get_sheet_sync_token()),
+                state="Status unavailable",
+                last_sync="Could not read the audit log",
+            )
 
         return self._run_background(
             self.sheet_sync_service.latest_success,
@@ -2697,7 +2759,7 @@ def sync_google_sheet_now(self):
                 "Add the private Google Sheet sync token in Settings.", 6000
             )
             self.nav_settings()
-            self.settings_view.sync_token_input.setFocus()
+            QTimer.singleShot(0, self.settings_view.prompt_replace_token)
             return None
 
         decision = QMessageBox.question(
@@ -2752,6 +2814,7 @@ def synchronized(result):
                 self.student_list_view.load_student_list()
             if self.stacked_widget.currentIndex() == 6:
                 self.load_coordinators()
+            self.refresh_sync_status()
 
         def failed(error):
             self._set_sync_busy(False)
@@ -2768,6 +2831,7 @@ def _set_sync_busy(self, busy: bool) -> None:
         self.sync_now_button.setEnabled(not busy)
         self.sync_now_button.setText("Syncing…" if busy else "Sync now")
         self.refresh_data_button.setEnabled(not busy)
+        self.settings_view.set_sync_busy(busy)
 
     @staticmethod
     def _format_sync_counts(details) -> str:
@@ -3565,7 +3629,7 @@ def create_profile_screen(self):
 
         self.photo_label = QLabel("Photo")
         self.photo_label.setObjectName("ProfileAvatar")
-        self.photo_label.setFixedSize(72, 72)
+        self.photo_label.setFixedSize(96, 96)
         self.photo_label.setAlignment(Qt.AlignmentFlag.AlignCenter)
         summary_layout.addWidget(self.photo_label)
 

assets/styles/app.qss

@@ -258,9 +258,9 @@ QFrame#ProfileAccent[status="graduated"] { background: @graduated; }
 *#ProfileAvatar {
     background: @graduated_soft;
     border: none;
-    border-radius: 36px;
+    border-radius: 48px;
     color: @graduated;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 700;
 }
 QWidget#ProfileInfoCard {
@@ -410,16 +410,55 @@ QWidget#ExpenseContextBar {
 }
 *#ExpenseStudentName { color: @text_primary; font-size: 13px; font-weight: 700; }
 QWidget#SettingsSectionRow { background: transparent; border: none; }
-QWidget#SettingsToggleRow {
-    background: @surface_subtle;
-    border: 1px solid @border_subtle;
-    border-radius: 8px;
+QFrame#SettingsPreferenceRow {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid @border_subtle;
+    border-radius: 0;
+}
+*#SettingsPreferenceTitle {
+    color: @text_primary;
+    font-size: 13px;
+    font-weight: 700;
+}
+*#SettingsPreferenceCopy {
+    color: @text_secondary;
+    font-size: 11px;
 }
-QWidget#DatabaseStatePanel {
+*#SettingsProjectValue {
+    color: @text_primary;
+    font-size: 12px;
+    font-weight: 650;
+}
+QFrame#SettingsTokenPanel {
     background: @surface_subtle;
     border: 1px solid @border_subtle;
     border-radius: 8px;
 }
+QFrame#SettingsSyncAccent {
+    background: @accent;
+    border: none;
+    border-radius: 2px;
+}
+*#SettingsMetaLabel {
+    color: @text_secondary;
+    font-size: 10px;
+    font-weight: 650;
+}
+*#SettingsMetaValue {
+    color: @text_primary;
+    font-size: 12px;
+    font-weight: 650;
+}
+*#SettingsSyncNotice {
+    padding: 0 16px;
+    background: @warning_soft;
+    border: none;
+    border-radius: 7px;
+    color: @warning;
+    font-size: 11px;
+    font-weight: 550;
+}
 QWidget#SyncPanel {
     background: transparent;
     border: none;
@@ -433,6 +472,15 @@ QFrame#SyncAccentRail { background: @accent; border: none; border-radius: 2px; }
 *#SyncStateBadge[state="success"], *#SyncTokenBadge[state="success"] {
     background: @success_soft; border-color: @success; color: @success;
 }
+*#SettingsDatabaseBadge[state="success"] {
+    background: @success_soft; border-color: @success; color: @success;
+}
+*#SettingsDatabaseBadge[state="loading"] {
+    background: @accent_soft; border-color: @accent; color: @warning;
+}
+*#SettingsDatabaseBadge[state="danger"] {
+    background: @danger_soft; border-color: @danger; color: @danger;
+}
 *#SyncStateBadge[state="warning"], *#SyncTokenBadge[state="warning"] {
     background: @warning_soft; border-color: @warning; color: @warning;
 }

office_app/services/student_list_service.py

@@ -11,6 +11,8 @@ class StudentListService:
     """Business logic for student list filters, area counts, and grade options."""
 
     ALL_GRADES = "All years"
+    SORT_LAST_NAME = "last_name"
+    SORT_SPONSOR = "sponsor"
 
     def __init__(self, student_service: StudentService | None = None) -> None:
         self.student_service = student_service or StudentService()
@@ -60,3 +62,9 @@ def grade_options(self, rows: Sequence[Mapping[str, Any]]) -> List[str]:
             grades_by_key.values(),
             key=self.student_service.grade_sort_key,
         )
+
+    def sort_order(self, sort_key: str) -> List[str]:
+        """Return a stable repository order for the selected directory sort."""
+        if sort_key == self.SORT_SPONSOR:
+            return ["sponsor", "last_name", "first_name", "id"]
+        return ["last_name", "first_name", "id"]

office_app/services/updater_service.py

@@ -7,7 +7,7 @@
 
 class UpdaterService:
     # Change this whenever you compile a new .exe!
-    CURRENT_VERSION = "1.0.20"
+    CURRENT_VERSION = "1.0.21"
     MIN_INSTALLER_BYTES = 40 * 1024 * 1024
 
     def __init__(self, client):