wip(desktop): progress

packages/desktop/src/pages/layout.tsx

@@ -94,6 +94,11 @@ export default function Layout(props: ParentProps) {
     setStore("lastSession", directory, params.id)
   })
 
+  createEffect(() => {
+    const sidebarWidth = layout.sidebar.opened() ? layout.sidebar.width() : 48
+    document.documentElement.style.setProperty("--dialog-left-margin", `${sidebarWidth}px`)
+  })
+
   function getDraggableId(event: unknown): string | undefined {
     if (typeof event !== "object" || event === null) return undefined
     if (!("draggable" in event)) return undefined

packages/ui/src/components/dialog.css

@@ -16,6 +16,7 @@
 [data-component="dialog"] {
   position: fixed;
   inset: 0;
+  margin-left: var(--dialog-left-margin);
   z-index: 50;
   display: flex;
   align-items: center;
@@ -24,7 +25,7 @@
   [data-slot="dialog-container"] {
     position: relative;
     z-index: 50;
-    width: min(calc(100vw - 16px), 624px);
+    width: min(calc(100vw - 16px), 480px);
     height: min(calc(100vh - 16px), 512px);
     display: flex;
     flex-direction: column;

packages/ui/src/components/select-dialog.css

@@ -121,12 +121,19 @@
         line-height: var(--line-height-large); /* 142.857% */
         letter-spacing: var(--letter-spacing-normal);
 
+        [data-slot="select-dialog-item-selected-icon"] {
+          display: none;
+          color: var(--icon-strong-base);
+        }
+
         &[data-active="true"] {
           border-radius: var(--radius-md);
           background: var(--surface-raised-base-hover);
         }
         &[data-selected="true"] {
-          background: var(--surface-raised-base-hover);
+          [data-slot="select-dialog-item-selected-icon"] {
+            display: block;
+          }
         }
       }
     }

packages/ui/src/components/select-dialog.tsx

@@ -153,7 +153,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
                           }}
                         >
                           {others.children(item)}
-                          <Icon name="check-small" size="small" />
+                          <Icon data-slot="select-dialog-item-selected-icon" name="check-small" />
                         </button>
                       )}
                     </For>