dunkirk.sh / thistle
🪻 distributed transcription service thistle.dunkirk.sh
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: redesign settings UI with tab layout

Replaced sidebar navigation with horizontal tab layout matching the admin panel design for better consistency and cleaner appearance.

💘 Generated with Crush

Co-Authored-By: Crush <crush@charm.land>

Kieran Klukas 04562c8c b979981d

+47 -55
+47 -55
src/components/user-settings.ts
··· 55 55 } 56 56 57 57 .settings-container { 58 - display: flex; 59 - gap: 3rem; 58 + max-width: 80rem; 59 + margin: 0 auto; 60 + padding: 2rem; 60 61 } 61 62 62 - .sidebar { 63 - width: 250px; 64 - background: var(--background); 65 - padding: 2rem 0; 63 + h1 { 64 + margin-bottom: 1rem; 65 + color: var(--text); 66 + } 67 + 68 + .tabs { 66 69 display: flex; 67 - flex-direction: column; 70 + gap: 1rem; 71 + border-bottom: 2px solid var(--secondary); 72 + margin-bottom: 2rem; 68 73 } 69 74 70 - .sidebar-item { 75 + .tab { 71 76 padding: 0.75rem 1.5rem; 77 + border: none; 72 78 background: transparent; 73 79 color: var(--text); 74 - border-radius: 6px; 75 - border: 2px solid rgba(191, 192, 192, 0.3); 76 80 cursor: pointer; 77 - font-family: inherit; 78 81 font-size: 1rem; 79 82 font-weight: 500; 80 - text-align: left; 83 + font-family: inherit; 84 + border-bottom: 2px solid transparent; 85 + margin-bottom: -2px; 81 86 transition: all 0.2s; 82 - margin: 0.25rem 1rem; 87 + } 88 + 89 + .tab:hover { 90 + color: var(--primary); 83 91 } 84 92 85 - .sidebar-item:hover { 86 - background: rgba(79, 93, 117, 0.1); 87 - border-color: var(--secondary); 93 + .tab.active { 88 94 color: var(--primary); 95 + border-bottom-color: var(--primary); 89 96 } 90 97 91 - .sidebar-item.active { 92 - background: var(--primary); 93 - color: white; 94 - border-color: var(--primary); 98 + .tab-content { 99 + display: none; 95 100 } 96 101 97 - .content { 98 - flex: 1; 99 - background: var(--background); 102 + .tab-content.active { 103 + display: block; 100 104 } 101 105 102 106 .content-inner { 103 - max-width: 900px; 104 - padding: 3rem 2rem 0rem 0; 107 + max-width: 56rem; 105 108 } 106 109 107 110 .section { ··· 390 393 391 394 @media (max-width: 768px) { 392 395 .settings-container { 393 - flex-direction: column; 396 + padding: 1rem; 394 397 } 395 398 396 - .sidebar { 397 - width: 100%; 398 - flex-direction: row; 399 + .tabs { 399 400 overflow-x: auto; 400 - padding: 1rem 0; 401 401 } 402 402 403 - .sidebar-item { 403 + .tab { 404 404 white-space: nowrap; 405 - border-left: none; 406 - border-bottom: 3px solid transparent; 407 - } 408 - 409 - .sidebar-item.active { 410 - border-left-color: transparent; 411 - border-bottom-color: var(--accent); 412 405 } 413 406 414 407 .content-inner { 415 - padding: 2rem 1rem; 408 + padding: 0; 416 409 } 417 410 } 418 411 `; ··· 783 776 ).toLocaleDateString(); 784 777 785 778 return html` 779 + <div class="content-inner"> 786 780 <div class="section"> 787 781 <h2 class="section-title">Profile Information</h2> 788 782 ··· 984 978 <div class="field-value">${createdDate}</div> 985 979 </div> 986 980 </div> 987 - 981 + </div> 988 982 `; 989 983 } 990 984 991 985 renderSessionsPage() { 992 986 return html` 987 + <div class="content-inner"> 993 988 <div class="section"> 994 989 <h2 class="section-title">Active Sessions</h2> 995 990 ${ ··· 1052 1047 ` 1053 1048 } 1054 1049 </div> 1050 + </div> 1055 1051 `; 1056 1052 } 1057 1053 1058 1054 renderDangerPage() { 1059 1055 return html` 1056 + <div class="content-inner"> 1060 1057 <div class="section danger-section"> 1061 1058 <h2 class="section-title">Delete Account</h2> 1062 1059 <p class="danger-text"> ··· 1072 1069 Delete Account 1073 1070 </button> 1074 1071 </div> 1072 + </div> 1075 1073 `; 1076 1074 } 1077 1075 ··· 1090 1088 1091 1089 return html` 1092 1090 <div class="settings-container"> 1093 - <div class="sidebar"> 1091 + <h1>Settings</h1> 1092 + 1093 + <div class="tabs"> 1094 1094 <button 1095 - class="sidebar-item ${this.currentPage === "account" ? "active" : ""}" 1095 + class="tab ${this.currentPage === "account" ? "active" : ""}" 1096 1096 @click=${() => { 1097 1097 this.currentPage = "account"; 1098 1098 }} ··· 1100 1100 Account 1101 1101 </button> 1102 1102 <button 1103 - class="sidebar-item ${this.currentPage === "sessions" ? "active" : ""}" 1103 + class="tab ${this.currentPage === "sessions" ? "active" : ""}" 1104 1104 @click=${() => { 1105 1105 this.currentPage = "sessions"; 1106 1106 }} ··· 1108 1108 Sessions 1109 1109 </button> 1110 1110 <button 1111 - class="sidebar-item ${this.currentPage === "danger" ? "active" : ""}" 1111 + class="tab ${this.currentPage === "danger" ? "active" : ""}" 1112 1112 @click=${() => { 1113 1113 this.currentPage = "danger"; 1114 1114 }} ··· 1117 1117 </button> 1118 1118 </div> 1119 1119 1120 - <div class="content"> 1121 - <div class="content-inner"> 1122 - ${ 1123 - this.currentPage === "account" 1124 - ? this.renderAccountPage() 1125 - : this.currentPage === "sessions" 1126 - ? this.renderSessionsPage() 1127 - : this.renderDangerPage() 1128 - } 1129 - </div> 1130 - </div> 1120 + ${this.currentPage === "account" ? this.renderAccountPage() : ""} 1121 + ${this.currentPage === "sessions" ? this.renderSessionsPage() : ""} 1122 + ${this.currentPage === "danger" ? this.renderDangerPage() : ""} 1131 1123 </div> 1132 1124 1133 1125 ${