From 48f521e5515bc556eaddadaa93065be1ac52dd12 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 11:09:36 +0300
Subject: [PATCH] feat(web): upgrade settings UX to telegram-like structure

- redesign settings main/general/notifications/privacy screens

- add status subtitles and structured rows

- improve privacy and notifications sections
---
 web/src/components/SettingsPanel.tsx | 89 ++++++++++++++++++----------
 1 file changed, 58 insertions(+), 31 deletions(-)

diff --git a/web/src/components/SettingsPanel.tsx b/web/src/components/SettingsPanel.tsx
index 20a43bf..b52e877 100644
--- a/web/src/components/SettingsPanel.tsx
+++ b/web/src/components/SettingsPanel.tsx
@@ -83,6 +83,8 @@ export function SettingsPanel({ open, onClose }: Props) {
     setPrefs(updateAppPreferences(patch));
   }
 
+  const notificationStatus = "Notification" in window ? Notification.permission : "denied";
+
   return createPortal(
     <div className="fixed inset-0 z-[150] bg-slate-950/60" onClick={onClose}>
       <aside
@@ -92,13 +94,13 @@ export function SettingsPanel({ open, onClose }: Props) {
         <div className="flex items-center justify-between border-b border-slate-700/60 px-4 py-3">
           <div className="flex items-center gap-2">
             {page !== "main" ? (
-              <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={() => setPage("main")}>
+              <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={() => setPage("main")} type="button">
                 Back
               </button>
             ) : null}
             <p className="text-lg font-semibold">{title}</p>
           </div>
-          <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={onClose}>
+          <button className="rounded bg-slate-700 px-2 py-1 text-xs" onClick={onClose} type="button">
             Close
           </button>
         </div>
@@ -106,9 +108,9 @@ export function SettingsPanel({ open, onClose }: Props) {
         <div className="tg-scrollbar min-h-0 flex-1 overflow-y-auto">
           {page === "main" ? (
             <>
-              <div className="border-b border-slate-700/60 px-4 py-4">
-                <p className="text-sm text-slate-300">Profile</p>
-                <div className="mt-2 space-y-2">
+              <section className="border-b border-slate-700/60 px-4 py-4">
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Profile</p>
+                <div className="space-y-2">
                   <input
                     className="w-full rounded bg-slate-800 px-3 py-2 text-sm"
                     placeholder="Name"
@@ -149,18 +151,29 @@ export function SettingsPanel({ open, onClose }: Props) {
                     Save profile
                   </button>
                 </div>
-              </div>
+              </section>
 
-              <MenuItem label="General Settings" onClick={() => setPage("general")} />
-              <MenuItem label="Notifications" onClick={() => setPage("notifications")} />
-              <MenuItem label="Privacy and Security" onClick={() => setPage("privacy")} />
+              <section className="border-b border-slate-700/60 py-1">
+                <SettingsRow label="General Settings" value={`${prefs.messageFontSize}px, ${prefs.theme}`} onClick={() => setPage("general")} />
+                <SettingsRow
+                  label="Notifications"
+                  value={prefs.webNotifications ? "Enabled" : "Disabled"}
+                  onClick={() => setPage("notifications")}
+                />
+                <SettingsRow
+                  label="Privacy and Security"
+                  value={allowPrivateMessages ? "Everybody can message" : "Messages disabled"}
+                  onClick={() => setPage("privacy")}
+                />
+              </section>
             </>
           ) : null}
 
           {page === "general" ? (
             <div className="space-y-4 px-4 py-3">
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
-                <p className="mb-2 text-sm text-slate-300">Message Font Size</p>
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Settings</p>
+                <p className="mb-2 text-sm">Message Font Size</p>
                 <div className="flex items-center gap-3">
                   <input
                     className="w-full"
@@ -171,21 +184,21 @@ export function SettingsPanel({ open, onClose }: Props) {
                     value={prefs.messageFontSize}
                     onChange={(e) => updatePrefs({ messageFontSize: Number(e.target.value) })}
                   />
-                  <span className="text-sm text-slate-200">{prefs.messageFontSize}</span>
+                  <span className="text-sm">{prefs.messageFontSize}</span>
                 </div>
               </section>
 
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
-                <p className="mb-2 text-sm text-slate-300">Theme</p>
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Theme</p>
                 <RadioOption checked={prefs.theme === "light"} label="Light" onChange={() => updatePrefs({ theme: "light" })} />
                 <RadioOption checked={prefs.theme === "dark"} label="Dark" onChange={() => updatePrefs({ theme: "dark" })} />
                 <RadioOption checked={prefs.theme === "system"} label="System" onChange={() => updatePrefs({ theme: "system" })} />
               </section>
 
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
-                <p className="mb-2 text-sm text-slate-300">Keyboard</p>
-                <RadioOption checked={prefs.sendMode === "enter"} label="Send with Enter" onChange={() => updatePrefs({ sendMode: "enter" })} />
-                <RadioOption checked={prefs.sendMode === "ctrl_enter"} label="Send with Ctrl+Enter" onChange={() => updatePrefs({ sendMode: "ctrl_enter" })} />
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Keyboard</p>
+                <RadioOption checked={prefs.sendMode === "enter"} label="Send with Enter (Shift+Enter new line)" onChange={() => updatePrefs({ sendMode: "enter" })} />
+                <RadioOption checked={prefs.sendMode === "ctrl_enter"} label="Send with Ctrl+Enter (Enter new line)" onChange={() => updatePrefs({ sendMode: "ctrl_enter" })} />
               </section>
             </div>
           ) : null}
@@ -193,9 +206,10 @@ export function SettingsPanel({ open, onClose }: Props) {
           {page === "notifications" ? (
             <div className="space-y-4 px-4 py-3">
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Web Notifications</p>
                 <CheckboxOption
                   checked={prefs.webNotifications}
-                  label="Web Notifications"
+                  label={`Web Notifications (${notificationStatus})`}
                   onChange={async (checked) => {
                     updatePrefs({ webNotifications: checked });
                     if (checked && "Notification" in window && Notification.permission === "default") {
@@ -203,17 +217,14 @@ export function SettingsPanel({ open, onClose }: Props) {
                     }
                   }}
                 />
-                <CheckboxOption
-                  checked={prefs.messagePreview}
-                  label="Message Preview"
-                  onChange={(checked) => updatePrefs({ messagePreview: checked })}
-                />
+                <CheckboxOption checked={prefs.messagePreview} label="Message Preview" onChange={(checked) => updatePrefs({ messagePreview: checked })} />
               </section>
+
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
-                <p className="mb-2 text-sm text-slate-300">Chats</p>
-                <CheckboxOption checked={prefs.privateNotifications} label="Private chats" onChange={(checked) => updatePrefs({ privateNotifications: checked })} />
-                <CheckboxOption checked={prefs.groupNotifications} label="Groups" onChange={(checked) => updatePrefs({ groupNotifications: checked })} />
-                <CheckboxOption checked={prefs.channelNotifications} label="Channels" onChange={(checked) => updatePrefs({ channelNotifications: checked })} />
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Chats</p>
+                <CheckboxOption checked={prefs.privateNotifications} label="Notifications for private chats" onChange={(checked) => updatePrefs({ privateNotifications: checked })} />
+                <CheckboxOption checked={prefs.groupNotifications} label="Notifications for groups" onChange={(checked) => updatePrefs({ groupNotifications: checked })} />
+                <CheckboxOption checked={prefs.channelNotifications} label="Notifications for channels" onChange={(checked) => updatePrefs({ channelNotifications: checked })} />
               </section>
             </div>
           ) : null}
@@ -221,13 +232,16 @@ export function SettingsPanel({ open, onClose }: Props) {
           {page === "privacy" ? (
             <div className="space-y-4 px-4 py-3">
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
-                <p className="text-sm text-slate-300">Blocked Users</p>
-                <p className="text-xs text-slate-400">{blockedCount}</p>
+                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Privacy</p>
+                <SettingsTextRow label="Blocked Users" value={String(blockedCount)} />
+                <SettingsTextRow label="Who can see my profile photo?" value="Everybody" />
+                <SettingsTextRow label="Who can see my last seen?" value="Everybody" />
+                <SettingsTextRow label="Who can add me to groups?" value="Everybody" />
               </section>
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                 <CheckboxOption
                   checked={allowPrivateMessages}
-                  label="Who can send me messages: Everybody"
+                  label="Who can send me messages? (Everybody)"
                   onChange={async (checked) => {
                     setAllowPrivateMessages(checked);
                     setSavingPrivacy(true);
@@ -250,14 +264,27 @@ export function SettingsPanel({ open, onClose }: Props) {
   );
 }
 
-function MenuItem({ label, onClick }: { label: string; onClick: () => void }) {
+function SettingsRow({ label, value, onClick }: { label: string; value: string; onClick: () => void }) {
   return (
-    <button className="block w-full border-b border-slate-800/60 px-4 py-3 text-left text-sm hover:bg-slate-800/70" onClick={onClick} type="button">
-      {label}
+    <button className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-slate-800/60" onClick={onClick} type="button">
+      <div className="min-w-0">
+        <p className="truncate text-sm font-semibold">{label}</p>
+        <p className="truncate text-xs text-slate-400">{value}</p>
+      </div>
+      <span className="text-slate-400">›</span>
     </button>
   );
 }
 
+function SettingsTextRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="mb-2 flex items-center justify-between gap-2 rounded bg-slate-900/50 px-2 py-2">
+      <p className="text-sm">{label}</p>
+      <p className="text-xs text-slate-400">{value}</p>
+    </div>
+  );
+}
+
 function RadioOption({ checked, label, onChange }: { checked: boolean; label: string; onChange: () => void }) {
   return (
     <label className="mb-2 flex items-center gap-2 text-sm">