feat: map shapes, image persistence, grab tool, layer rename/delete, i18n, page metadata
This commit is contained in:
AlacrisDevs
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
import { Modal } from "$lib/components/ui";
|
||||
import { Modal, Logo } from "$lib/components/ui";
|
||||
import { createOrganization, generateSlug } from "$lib/api/organizations";
|
||||
import { toasts } from "$lib/stores/toast.svelte";
|
||||
import type { SupabaseClient } from "@supabase/supabase-js";
|
||||
@@ -56,22 +56,25 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Organizations | Root</title>
|
||||
<title>Organizations | root</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-background">
|
||||
<!-- Header -->
|
||||
<header class="border-b border-light/5">
|
||||
<div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div
|
||||
class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 bg-primary/10 rounded-xl flex items-center justify-center">
|
||||
<span class="material-symbols-rounded text-primary" style="font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 18;">hub</span>
|
||||
</div>
|
||||
<span class="font-heading text-body text-white">Root</span>
|
||||
<Logo size="sm" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<form method="POST" action="/auth/logout">
|
||||
<button type="submit" class="px-3 py-1.5 text-body-sm text-light/40 hover:text-white hover:bg-dark/50 rounded-xl transition-colors">Sign Out</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-3 py-1.5 text-body-sm text-light/40 hover:text-white hover:bg-dark/50 rounded-xl transition-colors"
|
||||
>Sign Out</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,43 +83,79 @@
|
||||
<main class="max-w-5xl mx-auto px-6 py-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="font-heading text-h3 text-white">Your Organizations</h2>
|
||||
<p class="text-body-sm text-light/40 mt-1">Select an organization to get started</p>
|
||||
<h2 class="font-heading text-h3 text-white">
|
||||
Your Organizations
|
||||
</h2>
|
||||
<p class="text-body-sm text-light/40 mt-1">
|
||||
Select an organization to get started
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-3 py-2 bg-primary text-background rounded-xl text-body-sm font-body hover:bg-primary-hover transition-colors"
|
||||
onclick={() => (showCreateModal = true)}
|
||||
>
|
||||
<span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">add</span>
|
||||
<span
|
||||
class="material-symbols-rounded"
|
||||
style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
|
||||
>add</span
|
||||
>
|
||||
New Organization
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if organizations.length === 0}
|
||||
<div class="bg-dark/30 border border-light/5 rounded-2xl p-12 text-center">
|
||||
<div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-light/5 flex items-center justify-center">
|
||||
<span class="material-symbols-rounded text-light/20" style="font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 28;">groups</span>
|
||||
<div
|
||||
class="bg-dark/30 border border-light/5 rounded-2xl p-12 text-center"
|
||||
>
|
||||
<div
|
||||
class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-light/5 flex items-center justify-center"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-rounded text-light/20"
|
||||
style="font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 28;"
|
||||
>groups</span
|
||||
>
|
||||
</div>
|
||||
<h3 class="font-heading text-body text-white mb-1">No organizations yet</h3>
|
||||
<p class="text-body-sm text-light/40 mb-6">Create your first organization to start collaborating</p>
|
||||
<h3 class="font-heading text-body text-white mb-1">
|
||||
No organizations yet
|
||||
</h3>
|
||||
<p class="text-body-sm text-light/40 mb-6">
|
||||
Create your first organization to start collaborating
|
||||
</p>
|
||||
<button
|
||||
class="px-4 py-2 bg-primary text-background rounded-xl text-body-sm font-body hover:bg-primary-hover transition-colors"
|
||||
onclick={() => (showCreateModal = true)}
|
||||
>Create Organization</button>
|
||||
>Create Organization</button
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{#each organizations as org}
|
||||
<a href="/{org.slug}" class="block group">
|
||||
<div class="bg-dark/30 border border-light/5 hover:border-primary/30 rounded-2xl p-5 transition-all h-full">
|
||||
<div
|
||||
class="bg-dark/30 border border-light/5 hover:border-primary/30 rounded-2xl p-5 transition-all h-full"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body">
|
||||
<div
|
||||
class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body"
|
||||
>
|
||||
{org.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-lg text-light/40 capitalize font-body">{org.role}</span>
|
||||
<span
|
||||
class="text-[10px] px-2 py-0.5 bg-light/5 rounded-lg text-light/40 capitalize font-body"
|
||||
>{org.role}</span
|
||||
>
|
||||
</div>
|
||||
<h3 class="font-heading text-body-sm text-white group-hover:text-primary transition-colors">{org.name}</h3>
|
||||
<p class="text-[11px] text-light/30 mt-0.5 font-body">/{org.slug}</p>
|
||||
<h3
|
||||
class="font-heading text-body-sm text-white group-hover:text-primary transition-colors"
|
||||
>
|
||||
{org.name}
|
||||
</h3>
|
||||
<p
|
||||
class="text-[11px] text-light/30 mt-0.5 font-body"
|
||||
>
|
||||
/{org.slug}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
@@ -132,7 +171,9 @@
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="org-name" class="text-body-sm text-light/60 font-body">Organization Name</label>
|
||||
<label for="org-name" class="text-body-sm text-light/60 font-body"
|
||||
>Organization Name</label
|
||||
>
|
||||
<input
|
||||
id="org-name"
|
||||
type="text"
|
||||
@@ -143,11 +184,19 @@
|
||||
</div>
|
||||
{#if newOrgName}
|
||||
<p class="text-body-sm text-light/40">
|
||||
URL: <span class="text-white font-body">/{generateSlug(newOrgName)}</span>
|
||||
URL: <span class="text-white font-body"
|
||||
>/{generateSlug(newOrgName)}</span
|
||||
>
|
||||
</p>
|
||||
{/if}
|
||||
<div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
|
||||
<button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (showCreateModal = false)}>Cancel</button>
|
||||
<div
|
||||
class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
|
||||
onclick={() => (showCreateModal = false)}>Cancel</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!newOrgName.trim() || creating}
|
||||
|
||||
Reference in New Issue
Block a user