feat: add routing

glzr-io · Oct 13, 2024 · 679b594 · 679b594
1 parent 1cc8ef9
commit 679b594
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 31 deletions.
diff --git a/packages/settings-ui/package.json b/packages/settings-ui/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@glzr/components": "1.0.0",
+    "@solidjs/router": "0.14.8",
     "smorf": "1.0.0",
     "solid-js": "1.9.2",
     "tailwindcss": "3.4.13 ",

diff --git a/packages/settings-ui/src/index.css b/packages/settings-ui/src/index.css
@@ -8,6 +8,10 @@ body,
   height: 100%;
 }
 
+.tabler-icon {
+  stroke-width: 1;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

diff --git a/packages/settings-ui/src/index.tsx b/packages/settings-ui/src/index.tsx
@@ -1,6 +1,14 @@
 /* @refresh reload */
 import './index.css';
+import { Route, Router } from '@solidjs/router';
 import { render } from 'solid-js/web';
-import { App } from './App';
+import { WidgetSettings } from './settings/WidgetSettings';
 
-render(() => <App />, document.getElementById('root')!);
+render(
+  () => (
+    <Router>
+      <Route path="/" component={WidgetSettings} />
+    </Router>
+  ),
+  document.getElementById('root')!,
+);
diff --git a/packages/settings-ui/src/FileTree.tsx → ...ings-ui/src/settings/WidgetConfigTree.tsx b/packages/settings-ui/src/FileTree.tsx → ...ings-ui/src/settings/WidgetConfigTree.tsx
@@ -16,12 +16,15 @@ export interface FileItem {
   children?: FileItem[];
 }
 
-export interface FileTreeProps {
+export interface WidgetConfigTreeProps {
   files: FileItem[];
   onSelect: (file: FileItem) => void;
 }
 
-export function FileTree({ files, onSelect }: FileTreeProps) {
+export function WidgetConfigTree({
+  files,
+  onSelect,
+}: WidgetConfigTreeProps) {
   const [expanded, setExpanded] = createSignal<Record<string, boolean>>(
     {},
   );

diff --git a/packages/settings-ui/src/App.tsx → ...ttings-ui/src/settings/WidgetSettings.tsx b/packages/settings-ui/src/App.tsx → ...ttings-ui/src/settings/WidgetSettings.tsx
@@ -1,5 +1,5 @@
-import { FileItem, FileTree } from './FileTree';
-import { WidgetSettings } from './WidgetSettings';
+import { FileItem, WidgetConfigTree } from './WidgetConfigTree';
+import { WidgetSettingsForm } from './WidgetSettingsForm';
 
 const initialFiles: FileItem[] = [
   {
@@ -26,37 +26,37 @@ const initialFiles: FileItem[] = [
     children: [
       {
         name: 'Vacation.jpg',
-        type: 'image',
+        type: 'file',
         size: '3.2 MB',
         modified: '2023-09-28',
       },
       {
         name: 'Family.png',
-        type: 'image',
+        type: 'file',
         size: '2.9 MB',
         modified: '2023-09-29',
       },
     ],
   },
   {
     name: 'Music.mp3',
-    type: 'audio',
+    type: 'file',
     size: '5.4 MB',
     modified: '2023-10-01',
   },
   {
     name: 'Video.mp4',
-    type: 'video',
+    type: 'file',
     size: '15.7 MB',
     modified: '2023-10-02',
   },
 ];
 
-export function App() {
+export function WidgetSettings() {
   return (
     <div class="app">
-      <FileTree files={initialFiles} onSelect={() => {}} />
-      <WidgetSettings />
+      <WidgetConfigTree files={initialFiles} onSelect={() => {}} />
+      <WidgetSettingsForm />
     </div>
   );
 }
diff --git a/packages/settings-ui/src/WidgetSettings.tsx → ...gs-ui/src/settings/WidgetSettingsForm.tsx b/packages/settings-ui/src/WidgetSettings.tsx → ...gs-ui/src/settings/WidgetSettingsForm.tsx
@@ -46,8 +46,8 @@ type WidgetPreset = {
   };
 };
 
-export function WidgetSettings() {
-  const widgetForm = createForm<WidgetSettings>({
+export function WidgetSettingsForm() {
+  const settingsForm = createForm<WidgetSettings>({
     htmlPath: '',
     zOrder: 'normal',
     shownInTaskbar: false,
@@ -59,15 +59,15 @@ export function WidgetSettings() {
   });
 
   const presetNames = createMemo(() =>
-    widgetForm.value.presets.map(preset => preset.name),
+    settingsForm.value.presets.map(preset => preset.name),
   );
 
   const [selectedPreset, setSelectedPreset] = createSignal<string | null>(
     null,
   );
 
   function addNewPreset() {
-    widgetForm.setValue('presets', presets => [
+    settingsForm.setValue('presets', presets => [
       ...presets,
       {
         name: presets.length ? `default${presets.length + 1}` : 'default',
@@ -83,7 +83,7 @@ export function WidgetSettings() {
     ]);
 
     if (!selectedPreset()) {
-      setSelectedPreset(widgetForm.value.presets[0].name);
+      setSelectedPreset(settingsForm.value.presets[0].name);
     }
   }
 
@@ -97,11 +97,11 @@ export function WidgetSettings() {
 
       <Card>
         <CardHeader>
-          <CardTitle>Widget Settings</CardTitle>
+          <CardTitle>Widget settings</CardTitle>
         </CardHeader>
 
         <CardContent class="space-y-4">
-          <Field of={widgetForm} path="htmlPath">
+          <Field of={settingsForm} path="htmlPath">
             {inputProps => (
               <TextField
                 id="html-path"
@@ -112,7 +112,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="zOrder">
+          <Field of={settingsForm} path="zOrder">
             {inputProps => (
               <SelectField
                 id="z-order"
@@ -137,7 +137,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="shownInTaskbar">
+          <Field of={settingsForm} path="shownInTaskbar">
             {inputProps => (
               <SwitchField
                 id="shown-in-taskbar"
@@ -147,7 +147,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="focused">
+          <Field of={settingsForm} path="focused">
             {inputProps => (
               <SwitchField
                 id="focused"
@@ -157,7 +157,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="resizable">
+          <Field of={settingsForm} path="resizable">
             {inputProps => (
               <SwitchField
                 id="resizable"
@@ -167,7 +167,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="transparent">
+          <Field of={settingsForm} path="transparent">
             {inputProps => (
               <SwitchField
                 id="transparent"
@@ -185,9 +185,9 @@ export function WidgetSettings() {
         </CardHeader>
 
         <CardContent class="space-y-4">
-          {widgetForm.value.presets.map((_, index) => (
+          {settingsForm.value.presets.map((_, index) => (
             <div class="border p-4 rounded-md space-y-2">
-              <Field of={widgetForm} path={`presets.${index}.name`}>
+              <Field of={settingsForm} path={`presets.${index}.name`}>
                 {inputProps => (
                   <TextField
                     id={`name-${index}`}
@@ -198,7 +198,7 @@ export function WidgetSettings() {
               </Field>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                <Field of={widgetForm} path={`presets.${index}.anchor`}>
+                <Field of={settingsForm} path={`presets.${index}.anchor`}>
                   {inputProps => (
                     <SelectField
                       id={`anchor-${index}`}
@@ -223,7 +223,7 @@ export function WidgetSettings() {
                 </Field>
 
                 <Field
-                  of={widgetForm}
+                  of={settingsForm}
                   path={`presets.${index}.monitorSelection.type`}
                 >
                   {inputProps => (
@@ -245,7 +245,7 @@ export function WidgetSettings() {
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                 {/* TODO: Change to px/percent input. */}
-                <Field of={widgetForm} path={`presets.${index}.offsetX`}>
+                <Field of={settingsForm} path={`presets.${index}.offsetX`}>
                   {inputProps => (
                     <TextField
                       id={`offset-x-${index}`}
@@ -256,7 +256,7 @@ export function WidgetSettings() {
                 </Field>
 
                 {/* TODO: Change to px/percent input. */}
-                <Field of={widgetForm} path={`presets.${index}.offsetY`}>
+                <Field of={settingsForm} path={`presets.${index}.offsetY`}>
                   {inputProps => (
                     <TextField
                       id={`offset-y-${index}`}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml