[F] App bar

.gitignore

@@ -22,3 +22,5 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 data/
+
+public/assets/fonts/cache

bun.lock

@@ -6,10 +6,13 @@
       "name": "kashi-dash",
       "dependencies": {
         "@fontsource/roboto": "^5.2.8",
+        "@iconify-json/material-symbols": "^1.2.46",
         "@neteasecloudmusicapienhanced/api": "^4.29.17",
         "@unocss/core": "^66.5.6",
         "@unocss/extractor-svelte": "^66.5.6",
+        "@unocss/preset-attributify": "^66.5.6",
         "@unocss/preset-icons": "^66.5.6",
+        "@unocss/reset": "^66.5.6",
         "m3-svelte": "^5.14.1",
         "openai": "^6.9.0",
         "sass": "^1.94.0",
@@ -142,6 +145,8 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.46", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-cNWdSAa5Z3f0TlqdCt28rmeYWGKwe68J1ORdyHyqC4D6H7CWiVKBJXV3TDTocOQVDO372bz+cmsFeo4+pbRy+A=="],
+
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
     "@iconify/utils": ["@iconify/utils@3.0.2", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@antfu/utils": "^9.2.0", "@iconify/types": "^2.0.0", "debug": "^4.4.1", "globals": "^15.15.0", "kolorist": "^1.8.0", "local-pkg": "^1.1.1", "mlly": "^1.7.4" } }, "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ=="],

package.json

@@ -34,10 +34,13 @@
 	},
 	"dependencies": {
 		"@fontsource/roboto": "^5.2.8",
+		"@iconify-json/material-symbols": "^1.2.46",
 		"@neteasecloudmusicapienhanced/api": "^4.29.17",
 		"@unocss/core": "^66.5.6",
 		"@unocss/extractor-svelte": "^66.5.6",
+		"@unocss/preset-attributify": "^66.5.6",
 		"@unocss/preset-icons": "^66.5.6",
+		"@unocss/reset": "^66.5.6",
 		"m3-svelte": "^5.14.1",
 		"openai": "^6.9.0",
 		"sass": "^1.94.0",

src/components/IconButton.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { icon, ...rest } = $props();
+</script>
+
+<button class="cbox w-48px h-48px" {...rest}>
+    <span class="h-24px w-24px {icon}"></span>
+</button>

src/components/appbar/AppBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Icon } from "m3-svelte";
+  import IconButton from "../IconButton.svelte";
+
+  let { title, account, settings }: {
+    title?: string
+    account?: () => void
+    settings?: () => void
+  } = $props()
+</script>
+
+<div class="hbox h-64px">
+  {#if account}
+    <IconButton icon="i-material-symbols:account-circle" onclick={account} aria-label="Account" />
+  {:else}
+    <IconButton icon="i-material-symbols:arrow-back-rounded" onclick={() => history.back()} aria-label="Account" />
+  {/if}
+  <div class="m3-font-title-large flex-1">{title}</div>
+  {#if settings}
+    <IconButton icon="i-material-symbols:settings-rounded" onclick={settings} aria-label="Settings" />
+  {/if}
+</div>

src/routes/+layout.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg'
+  import favicon from "$lib/assets/favicon.svg"
   import "@fontsource/roboto"
+  import 'virtual:uno.css'
   import "./app.sass"
   import "./material.scss"
-    import { AppBar } from "m3-svelte"
+  import '@unocss/reset/normalize.css'
+  import '@unocss/reset/tailwind-v4.css'
+
+  import AppBar from "../components/appbar/AppBar.svelte"
+  import type { LayoutProps } from "./$types";
+
+  let { data, children }: LayoutProps = $props();
   
-	let { children } = $props()
 </script>
 
 <svelte:head>

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script>
   import { Button } from "m3-svelte"
+  import AppBar from "../components/appbar/AppBar.svelte";
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
 
-<Button>Next</Button>
+<AppBar account={() => alert('Account clicked')} settings={() => alert('Settings clicked')} />

src/routes/app.sass

@@ -1,3 +1,7 @@
-html
+:root
     font-family: 'Roboto', system-ui, sans-serif
-    color-scheme: light
+    // color-scheme: light
+
+body
+    margin: 0
+    background: rgb(var(--m3-scheme-background))

src/routes/material.scss

@@ -5,9 +5,9 @@
     color-scheme: light;
   }
   :root, ::backdrop {
-    --m3-scheme-background: 253 247 254;
+    --m3-scheme-background: 254 247 255;
     --m3-scheme-on-background: 52 49 58;
-    --m3-scheme-surface: 253 247 254;
+    --m3-scheme-surface: 254 247 255;
     --m3-scheme-surface-dim: 222 215 228;
     --m3-scheme-surface-bright: 253 247 254;
     --m3-scheme-surface-container-lowest: 255 255 255;

uno.config.ts

@@ -105,6 +105,12 @@ export default defineConfig({
     })]
   ],
   shortcuts: {
+    // Azalea's shortcuts
+    'hbox': 'flex flex-row items-center',
+    'vbox': 'flex flex-col items-center',
+    'cbox': 'flex justify-center items-center',
+
+    // Marina
     'form-error': 'text-3.5 font-medium text-destructive',
     'form-warning': 'text-3.5 font-medium text-warning',
     'form-info': 'text-3.5 font-medium text-muted-foreground',

vite.config.ts

@@ -1,6 +1,15 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite'
+import extractorSvelte from '@unocss/extractor-svelte'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
-	plugins: [sveltekit()]
-});
+  plugins: [
+    UnoCSS({
+      extractors: [
+        extractorSvelte(),
+      ],
+    }),
+    sveltekit(),
+  ],
+})