feat: Users can now create new lists via the side nav

Author: spuxx-dev

apps/spuxx-client/package.json

@@ -23,7 +23,7 @@
     "@solidjs/router": "0.15.3",
     "@spuxx/browser-utils": "1.8.0",
     "@spuxx/js-utils": "2.0.1",
-    "@spuxx/solid": "1.5.0",
+    "@spuxx/solid": "1.5.1",
     "iconify-icon": "2.3.0",
     "solid-js": "^1.9.5"
   }

apps/spuxx-client/src/App.tsx

@@ -3,15 +3,10 @@ import '@spuxx/browser-utils/themes';
 import './styles/index.css';
 
 import { type Component } from 'solid-js';
-import { AppLayout } from './layout';
 import { AppRouter } from './router/router';
 
 const App: Component = () => {
-  return (
-    <AppLayout>
-      <AppRouter />
-    </AppLayout>
-  );
+  return <AppRouter />;
 };
 
 export default App;

apps/spuxx-client/src/assets/locales/de.yaml

@@ -3,8 +3,13 @@ main:
   page:
     login:
       login-via-oidc: Anmelden via auth.spuxx.dev
+lists:
+  component:
+    create-list-button:
+      title: Neue Liste
+      new-list-name: Neue Liste
 
 layout:
   side-nav:
     lists:
-      title: Listen
+      title: Listen

apps/spuxx-client/src/features/lists/components/create-list-button.component.tsx

@@ -0,0 +1,35 @@
+import { Api } from '@/services/api';
+import { NewList } from '@/services/api/lists/lists.types';
+import { useNavigate } from '@solidjs/router';
+import { intl } from '@spuxx/js-utils';
+import { Button, Layout } from '@spuxx/solid';
+import { Component, createSignal } from 'solid-js';
+
+export const CreateListButton: Component = () => {
+  const [loading, setLoading] = createSignal(false);
+  const navigate = useNavigate();
+
+  const handleClick = async () => {
+    const list: NewList = {
+      name: intl('lists.component.create-list-button.new-list-name'),
+    };
+    setLoading(true);
+    const request = Api.createList({ args: { list } });
+    const { id } = await request.promise;
+    setLoading(false);
+    navigate(`/lists/${id}`);
+    Layout.closeSidebarOnMobile();
+  };
+
+  return (
+    <Button
+      variant="colored"
+      color="text-default"
+      onClick={handleClick}
+      icon="mdi:plus"
+      loading={loading()}
+    >
+      {intl('lists.component.create-list-button.title')}
+    </Button>
+  );
+};

apps/spuxx-client/src/layout/side-nav/side-nav-lists.component.tsx

@@ -1,3 +1,4 @@
+import { CreateListButton } from '@/features/lists/components/create-list-button.component';
 import { createListsStore } from '@/stores/lists.store';
 import { intl } from '@spuxx/js-utils';
 import { ButtonLink, Layout, Sidebar } from '@spuxx/solid';
@@ -18,7 +19,6 @@ export const SideNavLists: Component = () => {
       <For each={store.lists}>
         {(list) => (
           <ButtonLink
-            class="decoration-transsparent"
             href={`/lists/${list.id}`}
             variant="colored"
             color="text-default"
@@ -30,6 +30,7 @@ export const SideNavLists: Component = () => {
           </ButtonLink>
         )}
       </For>
+      <CreateListButton />
     </Sidebar.Group>
   );
 };

apps/spuxx-client/src/router/router.tsx

@@ -1,10 +1,11 @@
 import { Route, Router } from '@solidjs/router';
 import { For, type ParentComponent } from 'solid-js';
 import { routes } from './routes';
+import { AppLayout } from '@/layout';
 
 export const AppRouter: ParentComponent = () => {
   return (
-    <Router>
+    <Router root={AppLayout}>
       <For each={routes}>
         {(route) => <Route path={route.path} component={route.component} />}
       </For>