userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests 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.css
+2 -1
View File
@@ -13,7 +13,8 @@
transition-duration: 150ms;
}
.button:active:hover, .button:active:focus {
.button:active:hover,
.button:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
}
src/app.d.ts
Vendored
+11 -11
View File
@@ -1,17 +1,17 @@
import '@poppanator/sveltekit-svg/dist/svg'
import "@poppanator/sveltekit-svg/dist/svg"
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
interface PageState {
modal?: string,
}
// interface Platform {}
}
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
interface PageState {
modal?: string
}
// interface Platform {}
}
}
export {};
export {}
src/app.html
+9 -9
View File
@@ -1,12 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
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",
},
])
src/lib/components/Icon.svelte
+33 -33
View File
@@ -1,18 +1,25 @@
<style>
div {
mask-repeat: none;
mask-size: 100% 100%;
}
</style>
<script lang="ts">
import cx from 'classnames'
import {switcher} from '@welshman/lib'
import AddSquare from 'assets/icons/Add Square.svg?dataurl'
import AddCircle from 'assets/icons/Add Circle.svg?dataurl'
import AltArrowRight from 'assets/icons/Alt Arrow Right.svg?dataurl'
import ClipboardText from 'assets/icons/Clipboard Text.svg?dataurl'
import Compass from 'assets/icons/Compass.svg?dataurl'
import CompassBig from 'assets/icons/Compass Big.svg?dataurl'
import HandPills from 'assets/icons/Hand Pills.svg?dataurl'
import HomeSmile from 'assets/icons/Home Smile.svg?dataurl'
import Plain from 'assets/icons/Plain.svg?dataurl'
import Settings from 'assets/icons/Settings.svg?dataurl'
import UFO3 from 'assets/icons/UFO 3.svg?dataurl'
import UserHeart from 'assets/icons/User Heart.svg?dataurl'
import cx from "classnames"
import {switcher} from "@welshman/lib"
import AddSquare from "assets/icons/Add Square.svg?dataurl"
import AddCircle from "assets/icons/Add Circle.svg?dataurl"
import AltArrowRight from "assets/icons/Alt Arrow Right.svg?dataurl"
import ClipboardText from "assets/icons/Clipboard Text.svg?dataurl"
import Compass from "assets/icons/Compass.svg?dataurl"
import CompassBig from "assets/icons/Compass Big.svg?dataurl"
import HandPills from "assets/icons/Hand Pills.svg?dataurl"
import HomeSmile from "assets/icons/Home Smile.svg?dataurl"
import Plain from "assets/icons/Plain.svg?dataurl"
import Settings from "assets/icons/Settings.svg?dataurl"
import UFO3 from "assets/icons/UFO 3.svg?dataurl"
import UserHeart from "assets/icons/User Heart.svg?dataurl"
export let icon
export let size = 5
@@ -20,18 +27,18 @@
const px = size * 4
const data = switcher(icon, {
'add-square': AddSquare,
'add-circle': AddCircle,
'alt-arrow-right': AltArrowRight,
'clipboard-text': ClipboardText,
'compass': Compass,
'compass-big': CompassBig,
'hand-pills': HandPills,
'home-smile': HomeSmile,
'plain': Plain,
'settings': Settings,
'ufo-3': UFO3,
'user-heart': UserHeart,
"add-square": AddSquare,
"add-circle": AddCircle,
"alt-arrow-right": AltArrowRight,
"clipboard-text": ClipboardText,
compass: Compass,
"compass-big": CompassBig,
"hand-pills": HandPills,
"home-smile": HomeSmile,
plain: Plain,
settings: Settings,
"ufo-3": UFO3,
"user-heart": UserHeart,
})
if (!data) {
@@ -42,10 +49,3 @@
<div
class={cx($$props.class, "bg-base-content")}
style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" />
<style>
div {
mask-repeat: none;
mask-size: 100% 100%;
}
</style>
src/lib/components/PrimaryNavItem.svelte
+4 -2
View File
@@ -2,8 +2,10 @@
export let title
</script>
<div class="relative z-nav-item flex justify-center items-center w-14 h-14">
<div class="avatar rounded-full p-1 bg-base-300 cursor-pointer tooltip tooltip-right" data-tip={title}>
<div class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
data-tip={title}>
<slot />
</div>
</div>
src/lib/components/SecondaryNavItem.svelte
+4 -2
View File
@@ -3,8 +3,10 @@
export let active
</script>
<a {href} class="button group hover:bg-base-100 transition-all justify-start border-none">
<div class="flex items-center gap-3 group-hover:brightness=[1.5]" class:group-hover:brightness-[1.4]={active}>
<a {href} class="button group justify-start border-none transition-all hover:bg-base-100">
<div
class="group-hover:brightness=[1.5] flex items-center gap-3"
class:group-hover:brightness-[1.4]={active}>
<slot />
</div>
</a>
src/routes/+layout.svelte
+13 -13
View File
@@ -1,24 +1,24 @@
<script lang="ts">
import "src/app.css"
import {onMount} from 'svelte'
import {page} from '$app/stores'
import {onNavigate} from '$app/navigation'
import Icon from 'lib/components/Icon.svelte'
import PrimaryNav from 'app/components/PrimaryNav.svelte'
import SecondaryNav from 'app/components/SecondaryNav.svelte'
import {fly, toast, modals, pushModal} from 'app/state'
import {onMount} from "svelte"
import {page} from "$app/stores"
import {onNavigate} from "$app/navigation"
import Icon from "lib/components/Icon.svelte"
import PrimaryNav from "app/components/PrimaryNav.svelte"
import SecondaryNav from "app/components/SecondaryNav.svelte"
import {fly, toast, modals, pushModal} from "app/state"
const login = async () => {
const nl = await import('nostr-login')
const nl = await import("nostr-login")
nl.init({
noBanner: true,
title: 'Welcome to Flotilla!',
description: 'Log in with your Nostr account or sign up to join.',
methods: ['connect', 'extension', 'local'],
title: "Welcome to Flotilla!",
description: "Log in with your Nostr account or sign up to join.",
methods: ["connect", "extension", "local"],
onAuth(npub: string) {
console.log(npub)
}
},
})
nl.launch()
@@ -38,7 +38,7 @@
<div class="flex h-screen" data-theme="dark">
<PrimaryNav />
<SecondaryNav />
<div class="bg-base-200 flex-grow">
<div class="flex-grow bg-base-200">
<slot />
</div>
</div>
src/routes/+page.svelte
+18 -14
View File
@@ -1,42 +1,46 @@
<script lang="ts">
import Icon from 'lib/components/Icon.svelte'
import Icon from "lib/components/Icon.svelte"
</script>
<div class="hero bg-base-200 min-h-screen">
<div class="hero min-h-screen bg-base-200">
<div class="hero-content">
<div class="max-w-xl flex flex-col gap-4">
<h1 class="text-5xl text-center text-stark-content">Welcome to</h1>
<h1 class="text-5xl font-bold uppercase text-center mb-4 text-stark-content">Flotilla</h1>
<div class="grid gap-3 grid-cols-2">
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
<div class="flex max-w-xl flex-col gap-4">
<h1 class="text-stark-content text-center text-5xl">Welcome to</h1>
<h1 class="text-stark-content mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
<div class="grid grid-cols-2 gap-3">
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="add-circle" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Create a group</p>
<p class="text-xs">Invite all your friends, do life together.<p>
<p class="text-xs">Invite all your friends, do life together.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="compass" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Discover groups</p>
<p class="text-xs">Find a community based on your hobbies or interests.<p>
<p class="text-xs">Find a community based on your hobbies or interests.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="plain" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Leave feedback</p>
<p class="text-xs">Let us know how we can improve by giving us feedback.<p>
<p class="text-xs">Let us know how we can improve by giving us feedback.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="hand-pills" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Donate to Flotilla</p>
<p class="text-xs">Support the project by donating to the developer.<p>
<p class="text-xs">Support the project by donating to the developer.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
src/routes/friends/+page.svelte
-1
View File
@@ -1 +0,0 @@