diff --git a/package.json b/package.json index 83047be..d3aac7e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "devDependencies": { "@eslint/compat": "^1.2.5", "@eslint/js": "^9.22.0", + "@internationalized/date": "^3.10.0", "@lucide/svelte": "^0.544.0", "@oslojs/crypto": "^1.0.1", "@oslojs/encoding": "^1.1.0", @@ -28,6 +29,7 @@ "@sveltejs/vite-plugin-svelte": "^6.0.0", "@tailwindcss/vite": "^4.1.13", "@types/node": "^22", + "bits-ui": "^2.11.4", "clsx": "^2.1.1", "drizzle-kit": "^0.30.2", "drizzle-orm": "^0.40.0", diff --git a/src/app.css b/src/app.css index ec4c004..53b52d8 100644 --- a/src/app.css +++ b/src/app.css @@ -1,54 +1,135 @@ -@font-face { - font-family: 'Washington'; - src: url('/fonts/Washington.ttf') format('truetype'); - font-weight: normal; - font-style: normal; +@import 'tailwindcss'; +@import 'tw-animate-css'; + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.141 0.005 285.823); + --card: oklch(1 0 0); + --card-foreground: oklch(0.141 0.005 285.823); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.21 0.006 285.885); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.705 0.015 286.067); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.21 0.006 285.885); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.705 0.015 286.067); } -* { - box-sizing: border-box; - margin: 0; - padding: 0; +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); } -body { - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; - line-height: 1.5; - background-color: #f8f8f8; - color: #333; - margin: 0 auto; -} +@layer base { + @font-face { + font-family: 'Washington'; + src: url('/fonts/Washington.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } -h1 { - font-family: 'Washington', serif; - font-weight: normal; -} + * { + @apply border-border outline-ring/50; + box-sizing: border-box; + margin: 0; + padding: 0; + } -h2, -h3, -h4, -h5, -h6 { - font-family: 'Times New Roman', Times, serif; - font-weight: normal; -} + body { + @apply bg-background text-foreground; -button { - cursor: pointer; - font-family: inherit; -} + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + sans-serif; + line-height: 1.5; + background-color: #f8f8f8; + color: #333; + margin: 0 auto; + } -input { - font-family: inherit; -} + h1 { + font-family: 'Washington', serif; + font-weight: normal; + font-size: 2rem; + } + h2, + h3, + h4, + h5, + h6 { + font-family: 'Times New Roman', Times, serif; + font-weight: normal; + } -a { - color: inherit; - text-decoration: none; + button { + cursor: pointer; + font-family: inherit; + } + + input { + font-family: inherit; + } + + a { + color: inherit; + text-decoration: none; + } } diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index df8d414..44acf7d 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -1,5 +1,5 @@

Serengo

- - +
@@ -39,7 +23,6 @@ width: 100%; position: relative; z-index: 10; - background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte index 251324c..974fff8 100644 --- a/src/lib/components/Map.svelte +++ b/src/lib/components/Map.svelte @@ -113,7 +113,6 @@ position: absolute; top: 12px; right: 12px; - z-index: 1000; } /* Location marker styles */ diff --git a/src/lib/components/ProfileIcon.svelte b/src/lib/components/ProfileIcon.svelte deleted file mode 100644 index e6b94aa..0000000 --- a/src/lib/components/ProfileIcon.svelte +++ /dev/null @@ -1,59 +0,0 @@ - - - - - diff --git a/src/lib/components/ProfilePanel.svelte b/src/lib/components/ProfilePanel.svelte index 72b4f39..061e70a 100644 --- a/src/lib/components/ProfilePanel.svelte +++ b/src/lib/components/ProfilePanel.svelte @@ -1,128 +1,170 @@ - - {#snippet header()} -

Profile

- {/snippet} + + + + + {initial} + + + -
-
- Username - {username} + +
+ Profile
-
- User ID - {id} + + + -
-
- -
+ -
- + + + +
+ + + +
+ + diff --git a/src/lib/components/avatar/avatar-fallback.svelte b/src/lib/components/avatar/avatar-fallback.svelte new file mode 100644 index 0000000..4a452e9 --- /dev/null +++ b/src/lib/components/avatar/avatar-fallback.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/avatar/avatar-image.svelte b/src/lib/components/avatar/avatar-image.svelte new file mode 100644 index 0000000..7ccc3ce --- /dev/null +++ b/src/lib/components/avatar/avatar-image.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/avatar/avatar.svelte b/src/lib/components/avatar/avatar.svelte new file mode 100644 index 0000000..3fd4dc2 --- /dev/null +++ b/src/lib/components/avatar/avatar.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/components/avatar/index.ts b/src/lib/components/avatar/index.ts new file mode 100644 index 0000000..9585f8a --- /dev/null +++ b/src/lib/components/avatar/index.ts @@ -0,0 +1,13 @@ +import Root from './avatar.svelte'; +import Image from './avatar-image.svelte'; +import Fallback from './avatar-fallback.svelte'; + +export { + Root, + Image, + Fallback, + // + Root as Avatar, + Image as AvatarImage, + Fallback as AvatarFallback +}; diff --git a/src/lib/components/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/dropdown-menu/dropdown-menu-checkbox-item.svelte new file mode 100644 index 0000000..ed52f67 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -0,0 +1,41 @@ + + + + {#snippet children({ checked, indeterminate })} + + {#if indeterminate} + + {:else} + + {/if} + + {@render childrenProp?.()} + {/snippet} + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/dropdown-menu/dropdown-menu-content.svelte new file mode 100644 index 0000000..305557b --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-content.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/dropdown-menu/dropdown-menu-group-heading.svelte new file mode 100644 index 0000000..920848e --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-group-heading.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/dropdown-menu/dropdown-menu-group.svelte new file mode 100644 index 0000000..261ab7e --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-group.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/dropdown-menu/dropdown-menu-item.svelte new file mode 100644 index 0000000..b0d4ed3 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-item.svelte @@ -0,0 +1,27 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/dropdown-menu/dropdown-menu-label.svelte new file mode 100644 index 0000000..14e40f7 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-label.svelte @@ -0,0 +1,24 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte new file mode 100644 index 0000000..3e98749 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/dropdown-menu/dropdown-menu-radio-item.svelte new file mode 100644 index 0000000..ca8ccaf --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-radio-item.svelte @@ -0,0 +1,31 @@ + + + + {#snippet children({ checked })} + + {#if checked} + + {/if} + + {@render childrenProp?.({ checked })} + {/snippet} + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte new file mode 100644 index 0000000..a076e43 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/dropdown-menu/dropdown-menu-shortcut.svelte new file mode 100644 index 0000000..eb86e67 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-shortcut.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/dropdown-menu/dropdown-menu-sub-content.svelte new file mode 100644 index 0000000..8528d25 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-sub-content.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/dropdown-menu/dropdown-menu-sub-trigger.svelte new file mode 100644 index 0000000..96bb810 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -0,0 +1,29 @@ + + + + {@render children?.()} + + diff --git a/src/lib/components/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/dropdown-menu/dropdown-menu-trigger.svelte new file mode 100644 index 0000000..032b645 --- /dev/null +++ b/src/lib/components/dropdown-menu/dropdown-menu-trigger.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/dropdown-menu/index.ts b/src/lib/components/dropdown-menu/index.ts new file mode 100644 index 0000000..aeb398e --- /dev/null +++ b/src/lib/components/dropdown-menu/index.ts @@ -0,0 +1,49 @@ +import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'; +import CheckboxItem from './dropdown-menu-checkbox-item.svelte'; +import Content from './dropdown-menu-content.svelte'; +import Group from './dropdown-menu-group.svelte'; +import Item from './dropdown-menu-item.svelte'; +import Label from './dropdown-menu-label.svelte'; +import RadioGroup from './dropdown-menu-radio-group.svelte'; +import RadioItem from './dropdown-menu-radio-item.svelte'; +import Separator from './dropdown-menu-separator.svelte'; +import Shortcut from './dropdown-menu-shortcut.svelte'; +import Trigger from './dropdown-menu-trigger.svelte'; +import SubContent from './dropdown-menu-sub-content.svelte'; +import SubTrigger from './dropdown-menu-sub-trigger.svelte'; +import GroupHeading from './dropdown-menu-group-heading.svelte'; +const Sub = DropdownMenuPrimitive.Sub; +const Root = DropdownMenuPrimitive.Root; + +export { + CheckboxItem, + Content, + Root as DropdownMenu, + CheckboxItem as DropdownMenuCheckboxItem, + Content as DropdownMenuContent, + Group as DropdownMenuGroup, + Item as DropdownMenuItem, + Label as DropdownMenuLabel, + RadioGroup as DropdownMenuRadioGroup, + RadioItem as DropdownMenuRadioItem, + Separator as DropdownMenuSeparator, + Shortcut as DropdownMenuShortcut, + Sub as DropdownMenuSub, + SubContent as DropdownMenuSubContent, + SubTrigger as DropdownMenuSubTrigger, + Trigger as DropdownMenuTrigger, + GroupHeading as DropdownMenuGroupHeading, + Group, + GroupHeading, + Item, + Label, + RadioGroup, + RadioItem, + Root, + Separator, + Shortcut, + Sub, + SubContent, + SubTrigger, + Trigger +}; diff --git a/src/lib/components/skeleton/index.ts b/src/lib/components/skeleton/index.ts new file mode 100644 index 0000000..3120ce1 --- /dev/null +++ b/src/lib/components/skeleton/index.ts @@ -0,0 +1,7 @@ +import Root from './skeleton.svelte'; + +export { + Root, + // + Root as Skeleton +}; diff --git a/src/lib/components/skeleton/skeleton.svelte b/src/lib/components/skeleton/skeleton.svelte new file mode 100644 index 0000000..cdd10e0 --- /dev/null +++ b/src/lib/components/skeleton/skeleton.svelte @@ -0,0 +1,17 @@ + + +
diff --git a/src/lib/index.ts b/src/lib/index.ts index c6e1480..03a42e5 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -2,7 +2,6 @@ export { default as Input } from './components/Input.svelte'; export { default as Button } from './components/Button.svelte'; export { default as ErrorMessage } from './components/ErrorMessage.svelte'; -export { default as ProfileIcon } from './components/ProfileIcon.svelte'; export { default as ProfilePanel } from './components/ProfilePanel.svelte'; export { default as Header } from './components/Header.svelte'; export { default as Modal } from './components/Modal.svelte'; diff --git a/src/lib/stores/location.ts b/src/lib/stores/location.ts index e9e2cf7..ca943dd 100644 --- a/src/lib/stores/location.ts +++ b/src/lib/stores/location.ts @@ -199,17 +199,20 @@ export const getMapCenter = derived(coordinates, ($coordinates) => { }); // Utility function to get appropriate zoom level based on accuracy -export const getMapZoom = derived([coordinates, shouldZoomToLocation], ([$coordinates, $shouldZoom]) => { - if ($coordinates?.accuracy) { - // More aggressive zoom levels when location button is clicked - const baseZoom = $shouldZoom ? 2 : 0; // Add 2 zoom levels when triggered by button +export const getMapZoom = derived( + [coordinates, shouldZoomToLocation], + ([$coordinates, $shouldZoom]) => { + if ($coordinates?.accuracy) { + // More aggressive zoom levels when location button is clicked + const baseZoom = $shouldZoom ? 2 : 0; // Add 2 zoom levels when triggered by button - // Adjust zoom based on accuracy (lower accuracy = lower zoom) - if ($coordinates.accuracy < 10) return Math.min(20, 18 + baseZoom); // Very accurate - if ($coordinates.accuracy < 50) return Math.min(19, 16 + baseZoom); // Good accuracy - if ($coordinates.accuracy < 100) return Math.min(18, 14 + baseZoom); // Moderate accuracy - if ($coordinates.accuracy < 500) return Math.min(16, 12 + baseZoom); // Low accuracy - return Math.min(15, 10 + baseZoom); // Very low accuracy + // Adjust zoom based on accuracy (lower accuracy = lower zoom) + if ($coordinates.accuracy < 10) return Math.min(20, 18 + baseZoom); // Very accurate + if ($coordinates.accuracy < 50) return Math.min(19, 16 + baseZoom); // Good accuracy + if ($coordinates.accuracy < 100) return Math.min(18, 14 + baseZoom); // Moderate accuracy + if ($coordinates.accuracy < 500) return Math.min(16, 12 + baseZoom); // Low accuracy + return Math.min(15, 10 + baseZoom); // Very low accuracy + } + return $shouldZoom ? 16 : 13; // More aggressive default when triggered by button } - return $shouldZoom ? 16 : 13; // More aggressive default when triggered by button -}); +);