chore: Put more work into list view

Author: spuxx-dev

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

@@ -16,6 +16,8 @@ lists:
       new-list-name: Neue Liste
     settings:
       title: Einstellungen
+      name:
+        label: Name
 layout:
   side-nav:
     lists:

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

@@ -1,17 +1,27 @@
 import { List } from '@/services/api/lists/lists.types';
 import { intl } from '@spuxx/js-utils';
-import { Container } from '@spuxx/solid';
+import { Accordion, Input } from '@spuxx/solid';
 import { Component } from 'solid-js';
 
 interface Props {
   list: List;
 }
 
 export const ListSettings: Component<Props> = (props) => {
+  // const p = {};
+
   return (
-    <Container>
-      {intl('lists.component.settings.title')}
-      {props.list.name}
-    </Container>
+    <Accordion>
+      <Accordion.Item
+        title={intl('lists.component.settings.title')}
+        icon="mdi:gear"
+      >
+        <Input
+          label={intl('lists.component.settings.name.label')}
+          size="full"
+          // value={props.list.name}
+        />
+      </Accordion.Item>
+    </Accordion>
   );
 };

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

@@ -1,5 +1,5 @@
 import { List } from '@/services/api/lists/lists.types';
-import { Container, Heading, Icon } from '@spuxx/solid';
+import { Heading, Icon } from '@spuxx/solid';
 import { Component } from 'solid-js';
 import { ListItems } from './list-items.component';
 import { ListSettings } from './list-settings.component';
@@ -10,13 +10,13 @@ interface Props {
 
 export const ListView: Component<Props> = (props) => {
   return (
-    <Container class="text-center">
+    <>
       <Heading level={2}>
         <Icon icon={props.list.icon} />
         {props.list.name}
       </Heading>
       <ListItems list={props.list} />
       <ListSettings list={props.list} />
-    </Container>
+    </>
   );
 };

apps/spuxx-client/src/features/lists/pages/list.page.tsx

@@ -23,7 +23,7 @@ export const ListPage: Component = () => {
   createEffect(() => {});
 
   return (
-    <Container class="text-center m-auto">
+    <Container class="text-center m-auto w-2xl">
       <Show when={status() === HttpRequestStatus.pending}>
         {/* TODO: Move to Loader component in @spuxx/solid?  */}
         <Icon icon="svg-spinners:ring-resize" class="text-2xl" />