coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Autoformat

Browse Source
This commit is contained in:
Jon Staab
2024-08-05 15:28:46 -07:00
parent 856a5cecc4
commit 4172b2d91f
20 changed files with 362 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/PrimaryNav.svelte
+20 -18
View File
@@ -1,19 +1,28 @@
<style>
.z-nav-active {
-webkit-mask-image: url("/nav-active.svg");
mask-image: url("/nav-active.svg");
}
</style>
<script lang="ts">
import Icon from 'lib/components/Icon.svelte'
import PrimaryNavItem from 'lib/components/PrimaryNavItem.svelte'
import {spaces} from 'app/state'
import Icon from "lib/components/Icon.svelte"
import PrimaryNavItem from "lib/components/PrimaryNavItem.svelte"
import {spaces} from "app/state"
</script>
<div class="w-14 bg-base-100 relative">
<div class="absolute z-nav-active ml-2 w-12 h-[144px] bg-base-300 -top-[44px]" />
<div class="flex flex-col justify-between h-full">
<div class="relative w-14 bg-base-100">
<div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
<div class="flex h-full flex-col justify-between">
<div>
<PrimaryNavItem title="Hodlbod">
<div class="w-10 rounded-full border border-solid border-base-300">
<img alt="" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
<img
alt=""
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</PrimaryNavItem>
{#each $spaces as {id, name, picture} (id)}
{#each $spaces as { id, name, picture } (id)}
<PrimaryNavItem title={name}>
<div class="w-10 rounded-full border border-solid border-base-300">
<img alt={name} src={picture} />
@@ -21,29 +30,22 @@
</PrimaryNavItem>
{/each}
<PrimaryNavItem title="Add Space">
<div class="w-10 !flex justify-center items-center">
<div class="!flex w-10 items-center justify-center">
<Icon size={7} icon="add-circle" />
</div>
</PrimaryNavItem>
<PrimaryNavItem title="Browse Spaces">
<div class="w-10 !flex justify-center items-center">
<div class="!flex w-10 items-center justify-center">
<Icon size={6} icon="compass-big" />
</div>
</PrimaryNavItem>
</div>
<div>
<PrimaryNavItem title="Settings">
<div class="w-10 !flex justify-center items-center">
<div class="!flex w-10 items-center justify-center">
<Icon size={7} icon="settings" />
</div>
</PrimaryNavItem>
</div>
</div>
</div>
<style>
.z-nav-active {
-webkit-mask-image: url('/nav-active.svg');
mask-image: url('/nav-active.svg');
}
</style>
src/app/components/SecondaryNav.svelte
+5 -5
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import Icon from 'lib/components/Icon.svelte'
import SecondaryNavItem from 'lib/components/SecondaryNavItem.svelte'
import Icon from "lib/components/Icon.svelte"
import SecondaryNavItem from "lib/components/SecondaryNavItem.svelte"
</script>
<div class="w-60 bg-base-300 flex flex-col gap-1 px-2 py-4">
<div class="flex w-60 flex-col gap-1 bg-base-300 px-2 py-4">
<SecondaryNavItem href="/">
<Icon icon="home-smile" /> Home
</SecondaryNavItem>
@@ -13,11 +13,11 @@
<SecondaryNavItem href="/notes">
<Icon icon="clipboard-text" /> Saved Notes
</SecondaryNavItem>
<div class="uppercase text-sm font-bold flex justify-between items-center text-stark-content px-4 py-2">
<div
class="text-stark-content flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">
Conversations
<div class="cursor-pointer">
<Icon icon="add-circle" class="bg-stark-content" />
</div>
</div>
</div>
src/app/state.ts
+18 -13
View File
@@ -1,13 +1,14 @@
import type {ComponentType} from 'svelte'
import {readable, writable} from 'svelte/store'
import type {FlyParams} from 'svelte/transition'
import {fly as baseFly} from 'svelte/transition'
import {randomId} from '@welshman/lib'
import {pushState} from '$app/navigation'
import type {ComponentType} from "svelte"
import {readable, writable} from "svelte/store"
import type {FlyParams} from "svelte/transition"
import {fly as baseFly} from "svelte/transition"
import {randomId} from "@welshman/lib"
import {pushState} from "$app/navigation"
// Animations
export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params})
export const fly = (node: Element, params?: FlyParams | undefined) =>
baseFly(node, {y: 20, ...params})
// Toast
@@ -23,7 +24,10 @@ export type ToastOptions = {
export const toast = writable<Toast | null>(null)
export const pushToast = ({message = "", id = Math.random()}: Partial<Toast>, options: ToastOptions) => {
export const pushToast = (
{message = "", id = Math.random()}: Partial<Toast>,
options: ToastOptions,
) => {
toast.set({id, message, options})
setTimeout(() => popToast(id), options.timeout || 5000)
@@ -31,7 +35,7 @@ export const pushToast = ({message = "", id = Math.random()}: Partial<Toast>, op
return id
}
export const popToast = (id: number) => toast.update($t => $t?.id === id ? null : $t)
export const popToast = (id: number) => toast.update($t => ($t?.id === id ? null : $t))
// Modals
@@ -42,7 +46,7 @@ export const pushModal = (component: ComponentType, props: Record<string, any>)
// TODO: fix memory leak here by listening to history somehow
modals.set(id, {component, props})
pushState('', {modal: id})
pushState("", {modal: id})
return id
}
@@ -56,8 +60,9 @@ export const popModal = (id: string) => {
export const spaces = readable([
{
id: 'test',
id: "test",
name: "Test",
picture: "https://images.unsplash.com/photo-1721853046219-209921be684e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8"
}
picture:
"https://images.unsplash.com/photo-1721853046219-209921be684e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8",
},
])