add scrollbar to projects panel

Author: kcjerrell

package.json

@@ -2,7 +2,7 @@
   "name": "dtm",
   "author": "kcjerrell",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "tauri dev",

src-tauri/Cargo.lock

@@ -3,7 +3,7 @@ members = ["migration", "entity", ".", "fpzip-sys", "macros"]
 
 [package]
 name = "dtm"
-version = "0.4.0"
+version = "0.4.1"
 description = "A little app for reading Draw Things Metadata"
 authors = ["kcjerrell"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "DTM",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "identifier": "com.kcjer.dtm",
   "build": {
     "beforeDevCommand": "vite",

src-tauri/tauri.conf.json

@@ -91,37 +91,37 @@ function PanelList<T extends Selectable>(props: PanelListComponentProps<T>) {
                     id={"plcontiner"}
                     data-top="0"
                     data-bottom="0"
-                    css={{
-                        "--top": "0px",
-                        "--bottom": "0px",
-
-                        maskImage: `
-      linear-gradient(
-        to bottom,
-        transparent,
-        black var(--top),
-        black calc(100% - var(--bottom)),
-        transparent
-      )
-    `,
-                        WebkitMaskImage: `
-      linear-gradient(
-        to bottom,
-        transparent,
-        black var(--top),
-        black calc(100% - var(--bottom)),
-        transparent
-      )
-    `,
-
-                        '&[data-top="1"]': {
-                            "--top": "16px",
-                        },
-
-                        '&[data-bottom="1"]': {
-                            "--bottom": "16px",
-                        },
-                    }}
+                    //                 css={{
+                    //                     "--top": "0px",
+                    //                     "--bottom": "0px",
+
+                    //                     maskImage: `
+                    //   linear-gradient(
+                    //     to bottom,
+                    //     transparent,
+                    //     black var(--top),
+                    //     black calc(100% - var(--bottom)),
+                    //     transparent
+                    //   )
+                    // `,
+                    //                     WebkitMaskImage: `
+                    //   linear-gradient(
+                    //     to bottom,
+                    //     transparent,
+                    //     black var(--top),
+                    //     black calc(100% - var(--bottom)),
+                    //     transparent
+                    //   )
+                    // `,
+
+                    //                     '&[data-top="1"]': {
+                    //                         "--top": "16px",
+                    //                     },
+
+                    //                     '&[data-bottom="1"]': {
+                    //                         "--bottom": "16px",
+                    //                     },
+                    //                 }}
                 >
                     <PanelListScrollContent id={"plcontent"}>{children}</PanelListScrollContent>
                 </PaneListScrollContainer>

src/components/PanelList2.tsx

@@ -166,7 +166,7 @@ export const PaneListScrollContainer = chakra(
             },
         },
     },
-    { defaultProps: { className: "hide-scrollbar" } },
+    { defaultProps: { className: "panel-scroll-square" } },
 )
 
 export const PanelListScrollContent = chakra("div", {

src/components/common.tsx

@@ -77,6 +77,18 @@ const themeConfig = defineConfig({
                 borderColor: "bg.1",
             },
         },
+        ".panel-scroll-square": {
+            // scrollbarGutter: "stable",
+            _scrollbar: { backgroundColor: "none", width: "8px", borderRadius: "2px" },
+            _scrollbarThumb: {
+                backgroundColor: "fg.2/50",
+                width: "4px",
+                borderRadius: "2px",
+                boxShadow: "pane1",
+                borderRight: "1px solid",
+                borderColor: "bg.1",
+            },
+        },
         "#root": {
             bgColor: "#73747540",
             overflow: "clip",