add sidebar

Author: totegamma

locales/en/translation.json

@@ -552,7 +552,8 @@
             "settings": "Settings",
             "post": "Post",
             "documentation": "Documentation",
-            "forum": "Forum"
+            "forum": "Forum",
+            "notFound": "Not found"
         },
         "themeEditor": {
             "title": "Theme Editor",

locales/ja/translation.json

@@ -552,7 +552,8 @@
             "settings": "設定",
             "post": "投稿",
             "documentation": "ドキュメント",
-            "forum": "フォーラム"
+            "forum": "フォーラム",
+            "notFound": "見つかりません"
         },
         "themeEditor": {
             "title": "テーマエディタ",

web/src/components/Sidebar.tsx

@@ -16,6 +16,7 @@ import { CssVar } from '../types/Theme'
 
 import { SwitchAccountButton } from './SwitchAccountButton'
 import { ProfileName } from './ProfileName'
+import { SidebarLists } from './SidebarLists'
 import { useNavigate } from 'react-router-dom'
 import { useComposer } from '../contexts/Composer'
 import { semantics } from '@concrnt/worldlib'
@@ -109,7 +110,12 @@ export const Sidebar = () => {
                         {t('settings')}
                     </ListItem>
                 </List>
-                <div style={{ flex: 1 }} />
+                <Divider
+                    style={{
+                        borderColor: CssVar.backdropText
+                    }}
+                />
+                <SidebarLists />
                 <Button
                     onClick={() => {
                         const home = semantics.homeTimeline(client.ccid, client.currentProfile)

web/src/components/SidebarLists.module.css

@@ -0,0 +1,50 @@
+/* スクロールバーはhover中のみ表示する(グローバルのthumb色を上書き) */
+.scroll {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.scroll:hover {
+    scrollbar-color: color-mix(in srgb, var(--backdrop-text) 20%, transparent) transparent;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
+
+.scroll:hover::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--backdrop-text) 20%, transparent);
+}
+
+/* アイコン付きリスト行: hoverでアイコンから展開矢印にフェード切替 */
+.iconStack {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fadeIcon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    transition: opacity 0.2s;
+}
+
+.fadeArrow {
+    position: absolute;
+    opacity: 0;
+    transition:
+        transform 0.2s,
+        opacity 0.2s;
+}
+
+.iconStack:hover .fadeIcon {
+    opacity: 0;
+}
+
+.iconStack:hover .fadeArrow {
+    opacity: 1;
+}