till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(apps): replace inline SVGs with Phosphor icons across 19 apps

Browse source 
Migrate inline SVG icon paths to Phosphor components in chat, zitare,
times, citycorners, inventar, manacore, todo, playground, presi, and
more. Part of repo-wide icon unification effort.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 12:18:20 +02:00
parent 3f2e6a3ee5
commit f58d58ff99
30 changed files with 179 additions and 687 deletions
Download patch file Download diff file Expand all files Collapse all files

47
apps/chat/apps/web/src/routes/(protected)/archive/+page.svelte
View file

@ -3,6 +3,7 @@
import { conversationsStore } from '$lib/stores/conversations.svelte'; import { conversationsStore } from '$lib/stores/conversations.svelte';
import { useArchivedConversations } from '$lib/data/queries'; import { useArchivedConversations } from '$lib/data/queries';
import { PageHeader } from '@manacore/shared-ui'; import { PageHeader } from '@manacore/shared-ui';
import { Archive, ArrowUUpLeft, Trash } from '@manacore/shared-icons';
import type { Conversation } from '@chat/types'; import type { Conversation } from '@chat/types';
const archivedConvs = useArchivedConversations(); const archivedConvs = useArchivedConversations();
@ -47,19 +48,7 @@
{#if conversations.length === 0} {#if conversations.length === 0}
<!-- Empty State --> <!-- Empty State -->
<div class="text-center py-16"> <div class="text-center py-16">
<svg <Archive size={64} class="text-muted-foreground mx-auto mb-4" />
class="w-16 h-16 text-muted-foreground mx-auto mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
<h3 class="text-lg font-medium text-foreground mb-1">Keine archivierten Konversationen</h3> <h3 class="text-lg font-medium text-foreground mb-1">Keine archivierten Konversationen</h3>
<p class="text-muted-foreground">Archivierte Gespräche erscheinen hier.</p> <p class="text-muted-foreground">Archivierte Gespräche erscheinen hier.</p>
</div> </div>
@ -74,19 +63,7 @@
<button onclick={() => handleConversationClick(conv.id)} class="w-full p-4 text-left"> <button onclick={() => handleConversationClick(conv.id)} class="w-full p-4 text-left">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<svg <Archive size={20} class="text-muted-foreground" />
class="w-5 h-5 text-muted-foreground"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
<h3 class="font-semibold text-foreground"> <h3 class="font-semibold text-foreground">
{conv.title || 'Unbenannte Konversation'} {conv.title || 'Unbenannte Konversation'}
</h3> </h3>
@ -112,14 +89,7 @@
hover:text-primary hover:bg-primary/10 hover:text-primary hover:bg-primary/10
rounded-lg transition-colors" rounded-lg transition-colors"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ArrowUUpLeft size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
/>
</svg>
Wiederherstellen Wiederherstellen
</button> </button>
<button <button
@ -128,14 +98,7 @@
hover:text-destructive hover:bg-destructive/10 hover:text-destructive hover:bg-destructive/10
rounded-lg transition-colors" rounded-lg transition-colors"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Trash size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
Löschen Löschen
</button> </button>
</div> </div>

24
apps/chat/apps/web/src/routes/(protected)/documents/+page.svelte
View file

@ -4,6 +4,7 @@
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { documentService } from '$lib/services/document'; import { documentService } from '$lib/services/document';
import { PageHeader } from '@manacore/shared-ui'; import { PageHeader } from '@manacore/shared-ui';
import { ArrowsClockwise, FileText } from '@manacore/shared-icons';
import type { DocumentWithConversation } from '@chat/types'; import type { DocumentWithConversation } from '@chat/types';
let documents = $state<DocumentWithConversation[]>([]); let documents = $state<DocumentWithConversation[]>([]);
@ -92,14 +93,7 @@
hover:bg-muted rounded-lg transition-colors" hover:bg-muted rounded-lg transition-colors"
aria-label="Aktualisieren" aria-label="Aktualisieren"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ArrowsClockwise size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button> </button>
{/snippet} {/snippet}
</PageHeader> </PageHeader>
@ -114,19 +108,7 @@
{:else if documents.length === 0} {:else if documents.length === 0}
<!-- Empty State --> <!-- Empty State -->
<div class="text-center py-16"> <div class="text-center py-16">
<svg <FileText size={64} class="text-muted-foreground mx-auto mb-4" />
class="w-16 h-16 text-muted-foreground mx-auto mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<h3 class="text-lg font-medium text-foreground mb-1">Keine Dokumente gefunden</h3> <h3 class="text-lg font-medium text-foreground mb-1">Keine Dokumente gefunden</h3>
<p class="text-muted-foreground max-w-sm mx-auto"> <p class="text-muted-foreground max-w-sm mx-auto">
Erstelle ein neues Dokument in einer Konversation mit aktiviertem Dokumentmodus. Erstelle ein neues Dokument in einer Konversation mit aktiviertem Dokumentmodus.

54
apps/chat/apps/web/src/routes/(protected)/settings/+page.svelte
View file

@ -2,6 +2,15 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { userSettings } from '$lib/stores/user-settings.svelte'; import { userSettings } from '$lib/stores/user-settings.svelte';
import { APP_VERSION } from '$lib/version'; import { APP_VERSION } from '$lib/version';
import {
Bell,
DeviceMobile,
Envelope,
ShieldCheck,
Key,
Trash,
Info,
} from '@manacore/shared-icons';
import { import {
SettingsPage, SettingsPage,
SettingsSection, SettingsSection,
@ -34,14 +43,7 @@
<!-- Notifications Section --> <!-- Notifications Section -->
<SettingsSection title="Benachrichtigungen"> <SettingsSection title="Benachrichtigungen">
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Bell />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
{/snippet} {/snippet}
<SettingsCard> <SettingsCard>
@ -53,14 +55,7 @@
disabled disabled
> >
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="opacity-50"> <DeviceMobile class="opacity-50" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
{/snippet} {/snippet}
</SettingsToggle> </SettingsToggle>
@ -73,14 +68,7 @@
border={false} border={false}
> >
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="opacity-50"> <Envelope class="opacity-50" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
{/snippet} {/snippet}
</SettingsToggle> </SettingsToggle>
@ -93,14 +81,7 @@
<!-- Privacy & Security Section --> <!-- Privacy & Security Section -->
<SettingsSection title="Datenschutz & Sicherheit"> <SettingsSection title="Datenschutz & Sicherheit">
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ShieldCheck />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
{/snippet} {/snippet}
<SettingsCard> <SettingsCard>
@ -110,14 +91,7 @@
href="/profile" href="/profile"
> >
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Key />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
/>
</svg>
{/snippet} {/snippet}
</SettingsRow> </SettingsRow>
</SettingsCard> </SettingsCard>

33
apps/chat/apps/web/src/routes/(protected)/spaces/+page.svelte
View file

@ -4,6 +4,7 @@
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { spacesStore } from '$lib/stores/spaces.svelte'; import { spacesStore } from '$lib/stores/spaces.svelte';
import { PageHeader } from '@manacore/shared-ui'; import { PageHeader } from '@manacore/shared-ui';
import { Plus, UsersThree } from '@manacore/shared-icons';
import SpaceCard from '$lib/components/spaces/SpaceCard.svelte'; import SpaceCard from '$lib/components/spaces/SpaceCard.svelte';
import SpaceForm from '$lib/components/spaces/SpaceForm.svelte'; import SpaceForm from '$lib/components/spaces/SpaceForm.svelte';
import type { Space } from '@chat/types'; import type { Space } from '@chat/types';
@ -99,14 +100,7 @@
class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium
hover:bg-primary/90 transition-colors" hover:bg-primary/90 transition-colors"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
Neuen Space erstellen Neuen Space erstellen
</button> </button>
{/snippet} {/snippet}
@ -122,19 +116,7 @@
{:else if spacesStore.spaces.length === 0} {:else if spacesStore.spaces.length === 0}
<!-- Empty State --> <!-- Empty State -->
<div class="text-center py-16"> <div class="text-center py-16">
<svg <UsersThree size={64} class="text-muted-foreground mx-auto mb-4" />
class="w-16 h-16 text-muted-foreground mx-auto mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<h3 class="text-lg font-medium text-foreground mb-1">Keine Spaces gefunden</h3> <h3 class="text-lg font-medium text-foreground mb-1">Keine Spaces gefunden</h3>
<p class="text-muted-foreground mb-4"> <p class="text-muted-foreground mb-4">
Erstelle einen neuen Space oder frage nach einer Einladung Erstelle einen neuen Space oder frage nach einer Einladung
@ -144,14 +126,7 @@
class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium
hover:bg-primary/90 transition-colors" hover:bg-primary/90 transition-colors"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
Ersten Space erstellen Ersten Space erstellen
</button> </button>
</div> </div>

33
apps/chat/apps/web/src/routes/(protected)/templates/+page.svelte
View file

@ -5,6 +5,7 @@
import { templatesStore } from '$lib/stores/templates.svelte'; import { templatesStore } from '$lib/stores/templates.svelte';
import { conversationService } from '$lib/services/conversation'; import { conversationService } from '$lib/services/conversation';
import { PageHeader } from '@manacore/shared-ui'; import { PageHeader } from '@manacore/shared-ui';
import { Plus, FileText } from '@manacore/shared-icons';
import TemplateCard from '$lib/components/templates/TemplateCard.svelte'; import TemplateCard from '$lib/components/templates/TemplateCard.svelte';
import TemplateForm from '$lib/components/templates/TemplateForm.svelte'; import TemplateForm from '$lib/components/templates/TemplateForm.svelte';
import type { Template } from '@chat/types'; import type { Template } from '@chat/types';
@ -111,14 +112,7 @@
class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium
hover:bg-primary/90 transition-colors" hover:bg-primary/90 transition-colors"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
Neue Vorlage Neue Vorlage
</button> </button>
{/snippet} {/snippet}
@ -128,19 +122,7 @@
{#if templates.length === 0} {#if templates.length === 0}
<!-- Empty State --> <!-- Empty State -->
<div class="text-center py-16"> <div class="text-center py-16">
<svg <FileText size={64} class="text-muted-foreground mx-auto mb-4" />
class="w-16 h-16 text-muted-foreground mx-auto mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<h3 class="text-lg font-medium text-foreground mb-1">Keine Vorlagen vorhanden</h3> <h3 class="text-lg font-medium text-foreground mb-1">Keine Vorlagen vorhanden</h3>
<p class="text-muted-foreground mb-4">Erstelle deine erste Vorlage, um loszulegen</p> <p class="text-muted-foreground mb-4">Erstelle deine erste Vorlage, um loszulegen</p>
<button <button
@ -148,14 +130,7 @@
class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium
hover:bg-primary/90 transition-colors" hover:bg-primary/90 transition-colors"
> >
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
Erste Vorlage erstellen Erste Vorlage erstellen
</button> </button>
</div> </div>

19
apps/citycorners/apps/web/src/routes/(app)/+layout.svelte
View file

@ -22,6 +22,7 @@
import { getPillAppItems, getManaApp } from '@manacore/shared-branding'; import { getPillAppItems, getManaApp } from '@manacore/shared-branding';
import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n'; import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
import { setLocale, supportedLocales } from '$lib/i18n'; import { setLocale, supportedLocales } from '$lib/i18n';
import { List, X } from '@manacore/shared-icons';
import { api } from '$lib/api'; import { api } from '$lib/api';
let appItems = $derived( let appItems = $derived(
@ -295,23 +296,9 @@
title={showNav ? $_('nav.hideNav') : $_('nav.showNav')} title={showNav ? $_('nav.hideNav') : $_('nav.showNav')}
> >
{#if !showNav} {#if !showNav}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon"> <List size={24} class="fab-icon" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
{:else} {:else}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon"> <X size={24} class="fab-icon" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
{/if} {/if}
</button> </button>

33
apps/citycorners/apps/web/src/routes/(app)/+page.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Plus, MapPin, User } from '@manacore/shared-icons';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
@ -38,9 +39,7 @@
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-md transition-all hover:bg-primary/90 hover:shadow-lg" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-md transition-all hover:bg-primary/90 hover:shadow-lg"
title={$_('cities.add')} title={$_('cities.add')}
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <Plus size={20} weight="bold" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</a> </a>
{/if} {/if}
</header> </header>
@ -142,38 +141,14 @@
<span <span
class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary" class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary"
> >
<svg <MapPin size={12} />
class="h-3 w-3"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0zM19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
/>
</svg>
{count} {count}
</span> </span>
{#if cityStats.contributorCount > 0} {#if cityStats.contributorCount > 0}
<span <span
class="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-400" class="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-400"
> >
<svg <User size={12} />
class="h-3 w-3"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0"
/>
</svg>
{cityStats.contributorCount} {cityStats.contributorCount}
</span> </span>
{/if} {/if}

5
apps/citycorners/apps/web/src/routes/(app)/add-city/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { CaretLeft } from '@manacore/shared-icons';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { cityCollection, type LocalCity } from '$lib/data/local-store'; import { cityCollection, type LocalCity } from '$lib/data/local-store';
@ -116,9 +117,7 @@
<header class="mb-6"> <header class="mb-6">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<a href="/" class="text-foreground-secondary hover:text-primary transition-colors"> <a href="/" class="text-foreground-secondary hover:text-primary transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <CaretLeft size={16} />
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</a> </a>
<h1 class="text-2xl font-bold text-foreground">{$_('cityAdd.title')}</h1> <h1 class="text-2xl font-bold text-foreground">{$_('cityAdd.title')}</h1>
</div> </div>

1
apps/citycorners/apps/web/src/routes/(app)/favorites/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Heart } from '@manacore/shared-icons';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { favoritesStore } from '$lib/stores/favorites.svelte'; import { favoritesStore } from '$lib/stores/favorites.svelte';

23
apps/inventar/apps/web/src/routes/(app)/+layout.svelte
View file

@ -9,6 +9,7 @@
import { setLocale, supportedLocales } from '$lib/i18n'; import { setLocale, supportedLocales } from '$lib/i18n';
import { PillNavigation } from '@manacore/shared-ui'; import { PillNavigation } from '@manacore/shared-ui';
import { SyncIndicator } from '@manacore/shared-ui'; import { SyncIndicator } from '@manacore/shared-ui';
import { User, SignOut, Plus } from '@manacore/shared-icons';
import { getPillAppItems, getManaApp } from '@manacore/shared-branding'; import { getPillAppItems, getManaApp } from '@manacore/shared-branding';
import { AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui'; import { AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui'; import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
@ -128,14 +129,7 @@
href="/profile" href="/profile"
class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <User size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a> </a>
<button <button
@ -143,14 +137,7 @@
class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500" class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500"
title="Abmelden" title="Abmelden"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <SignOut size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</button> </button>
</div> </div>
</div> </div>
@ -183,9 +170,7 @@
onclick={() => goto('/items?action=new')} onclick={() => goto('/items?action=new')}
class="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-lg transition-transform hover:scale-105 md:hidden" class="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-lg transition-transform hover:scale-105 md:hidden"
> >
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={24} />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button> </button>
<!-- Guest Welcome Modal --> <!-- Guest Welcome Modal -->

5
apps/inventar/apps/web/src/routes/(app)/categories/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { Plus } from '@manacore/shared-icons';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { categoriesStore } from '$lib/stores/categories.svelte'; import { categoriesStore } from '$lib/stores/categories.svelte';
import type { Category } from '@inventar/shared'; import type { Category } from '@inventar/shared';
@ -69,9 +70,7 @@
onclick={startCreate} onclick={startCreate}
class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))]" class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))]"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={16} />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
{$_('category.create')} {$_('category.create')}
</button> </button>
</div> </div>

46
apps/inventar/apps/web/src/routes/(app)/collections/[id]/+page.svelte
View file

@ -2,6 +2,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { CaretLeft, PencilSimple, Plus, Trash } from '@manacore/shared-icons';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { itemsStore } from '$lib/stores/items.svelte'; import { itemsStore } from '$lib/stores/items.svelte';
import { viewStore } from '$lib/stores/view.svelte'; import { viewStore } from '$lib/stores/view.svelte';
@ -63,14 +64,7 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a href="/" class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"> <a href="/" class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <CaretLeft size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg>
</a> </a>
<span class="text-2xl">{collection.icon || '📁'}</span> <span class="text-2xl">{collection.icon || '📁'}</span>
<div> <div>
@ -86,27 +80,13 @@
href="/collections/{collection.id}/edit" href="/collections/{collection.id}/edit"
class="rounded-lg border border-[hsl(var(--border))] p-2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="rounded-lg border border-[hsl(var(--border))] p-2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <PencilSimple size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</a> </a>
<button <button
onclick={() => (showNewItem = !showNewItem)} onclick={() => (showNewItem = !showNewItem)}
class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))]" class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))]"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
{$_('item.create')} {$_('item.create')}
</button> </button>
</div> </div>
@ -249,14 +229,7 @@
onclick={(e) => deleteItem(e, item.id)} onclick={(e) => deleteItem(e, item.id)}
class="text-[hsl(var(--muted-foreground))] hover:text-red-500" class="text-[hsl(var(--muted-foreground))] hover:text-red-500"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Trash size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button> </button>
</td> </td>
</tr> </tr>
@ -302,14 +275,7 @@
onclick={(e) => deleteItem(e, item.id)} onclick={(e) => deleteItem(e, item.id)}
class="text-[hsl(var(--muted-foreground))] opacity-0 hover:text-red-500 group-hover:opacity-100" class="text-[hsl(var(--muted-foreground))] opacity-0 hover:text-red-500 group-hover:opacity-100"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Trash size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button> </button>
</div> </div>
{/each} {/each}

10
apps/inventar/apps/web/src/routes/(app)/collections/[id]/edit/+page.svelte
View file

@ -2,6 +2,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { CaretLeft } from '@manacore/shared-icons';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { collectionsStore } from '$lib/stores/collections.svelte'; import { collectionsStore } from '$lib/stores/collections.svelte';
import { getCollectionById } from '$lib/data/queries'; import { getCollectionById } from '$lib/data/queries';
@ -57,14 +58,7 @@
onclick={() => goto(`/collections/${collection.id}`)} onclick={() => goto(`/collections/${collection.id}`)}
class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <CaretLeft size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg>
</button> </button>
<h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">{$_('collection.edit')}</h1> <h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">{$_('collection.edit')}</h1>
</div> </div>

52
apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
View file

@ -7,6 +7,13 @@
AuditLog, AuditLog,
SessionManager, SessionManager,
} from '@manacore/shared-auth-ui'; } from '@manacore/shared-auth-ui';
import {
User,
CurrencyCircleDollar,
ShieldCheck,
FileText,
CaretRight,
} from '@manacore/shared-icons';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { creditsService } from '$lib/api/credits'; import { creditsService } from '$lib/api/credits';
import type { CreditBalance } from '$lib/api/credits'; import type { CreditBalance } from '$lib/api/credits';
@ -107,14 +114,7 @@
<div <div
class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary" class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <User size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div> </div>
<div> <div>
<h2 class="text-lg font-semibold">Profil</h2> <h2 class="text-lg font-semibold">Profil</h2>
@ -181,14 +181,7 @@
<div <div
class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400" class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <CurrencyCircleDollar size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div> </div>
<div> <div>
<h2 class="text-lg font-semibold">Credits</h2> <h2 class="text-lg font-semibold">Credits</h2>
@ -245,14 +238,7 @@
<div <div
class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400" class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ShieldCheck size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
</div> </div>
<div> <div>
<h2 class="text-lg font-semibold">Konto</h2> <h2 class="text-lg font-semibold">Konto</h2>
@ -368,14 +354,7 @@
<div <div
class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400" class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <FileText size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div> </div>
<div> <div>
<h2 class="text-lg font-semibold">Meine Daten (DSGVO)</h2> <h2 class="text-lg font-semibold">Meine Daten (DSGVO)</h2>
@ -396,14 +375,7 @@
class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors" class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
> >
Meine Daten Meine Daten
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <CaretRight size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</a> </a>
</div> </div>

10
apps/manacore/apps/web/src/routes/(app)/teams/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Card, Button, PageHeader } from '@manacore/shared-ui'; import { Card, Button, PageHeader } from '@manacore/shared-ui';
import { Plus } from '@manacore/shared-icons';
import type { PageData } from './$types'; import type { PageData } from './$types';
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
@ -22,14 +23,7 @@
<PageHeader title="Teams" description="Manage your teams and collaborate with members" size="lg"> <PageHeader title="Teams" description="Manage your teams and collaborate with members" size="lg">
{#snippet actions()} {#snippet actions()}
<Button variant="primary"> <Button variant="primary">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Plus size={20} class="mr-2" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
Create Team Create Team
</Button> </Button>
{/snippet} {/snippet}

19
apps/manacore/apps/web/src/routes/(auth)/+layout.svelte
View file

@ -4,6 +4,7 @@
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { theme } from '$lib/stores/theme'; import { theme } from '$lib/stores/theme';
import { Sun, Moon } from '@manacore/shared-icons';
let { children }: { children: Snippet } = $props(); let { children }: { children: Snippet } = $props();
let isDark = $derived(theme.isDark); let isDark = $derived(theme.isDark);
@ -34,23 +35,9 @@
aria-label="Toggle dark mode" aria-label="Toggle dark mode"
> >
{#if isDark} {#if isDark}
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <Sun size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
{:else} {:else}
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <Moon size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
{/if} {/if}
</button> </button>

14
apps/playground/apps/web/src/lib/components/chat/ChatInput.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { chatStore } from '$lib/stores/chat.svelte'; import { chatStore } from '$lib/stores/chat.svelte';
import { comparisonStore } from '$lib/stores/comparison.svelte'; import { comparisonStore } from '$lib/stores/comparison.svelte';
import { Stop, PaperPlaneRight } from '@manacore/shared-icons';
let input = $state(''); let input = $state('');
let textareaEl: HTMLTextAreaElement | undefined = $state(); let textareaEl: HTMLTextAreaElement | undefined = $state();
@ -62,9 +63,7 @@
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors"
style="background-color: var(--color-error);" style="background-color: var(--color-error);"
> >
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <Stop size={20} weight="fill" />
<rect x="6" y="6" width="12" height="12" rx="1" />
</svg>
</button> </button>
{:else} {:else}
<button <button
@ -74,14 +73,7 @@
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors disabled:opacity-50" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors disabled:opacity-50"
style="background-color: var(--color-primary);" style="background-color: var(--color-primary);"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <PaperPlaneRight size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg>
</button> </button>
{/if} {/if}
</div> </div>

10
apps/playground/apps/web/src/lib/components/layout/Header.svelte
View file

@ -2,6 +2,7 @@
import { getHealth } from '$lib/api/llm'; import { getHealth } from '$lib/api/llm';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { ArrowsClockwise } from '@manacore/shared-icons';
let healthStatus = $state<'loading' | 'healthy' | 'error'>('loading'); let healthStatus = $state<'loading' | 'healthy' | 'error'>('loading');
let healthDetails = $state<string>(''); let healthDetails = $state<string>('');
@ -67,14 +68,7 @@
class="rounded p-1.5 transition-colors hover:bg-white/10" class="rounded p-1.5 transition-colors hover:bg-white/10"
title="Refresh health status" title="Refresh health status"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ArrowsClockwise size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button> </button>
<button <button
onclick={() => authStore.signOut()} onclick={() => authStore.signOut()}

19
apps/playground/apps/web/src/lib/components/layout/Sidebar.svelte
View file

@ -5,6 +5,7 @@
import ModelComparisonSelector from '$lib/components/comparison/ModelComparisonSelector.svelte'; import ModelComparisonSelector from '$lib/components/comparison/ModelComparisonSelector.svelte';
import { chatStore } from '$lib/stores/chat.svelte'; import { chatStore } from '$lib/stores/chat.svelte';
import { modelsStore } from '$lib/stores/models.svelte'; import { modelsStore } from '$lib/stores/models.svelte';
import { Trash, Export } from '@manacore/shared-icons';
function handleExport() { function handleExport() {
const data = chatStore.exportMessages(); const data = chatStore.exportMessages();
@ -47,14 +48,7 @@
class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50" class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50"
style="background-color: var(--color-bg);" style="background-color: var(--color-bg);"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Trash size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
Clear Clear
</button> </button>
<button <button
@ -63,14 +57,7 @@
class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50" class="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50"
style="background-color: var(--color-bg);" style="background-color: var(--color-bg);"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Export size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/>
</svg>
Export Export
</button> </button>
</div> </div>

88
apps/presi/apps/web/src/routes/(app)/settings/+page.svelte
View file

@ -15,6 +15,7 @@
SettingsDangerButton, SettingsDangerButton,
GlobalSettingsSection, GlobalSettingsSection,
} from '@manacore/shared-ui'; } from '@manacore/shared-ui';
import { User, Envelope, ShieldCheck, Sun, Moon, Monitor, SignOut } from '@manacore/shared-icons';
function handleLogout() { function handleLogout() {
auth.logout(); auth.logout();
@ -38,39 +39,18 @@
<!-- Account Section --> <!-- Account Section -->
<SettingsSection title="Account"> <SettingsSection title="Account">
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <User />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
{/snippet} {/snippet}
<SettingsCard> <SettingsCard>
<SettingsRow label="Email" description={auth.user?.email || 'Not available'}> <SettingsRow label="Email" description={auth.user?.email || 'Not available'}>
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Envelope />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
{/snippet} {/snippet}
</SettingsRow> </SettingsRow>
<SettingsRow label="User ID" description={auth.user?.id || 'Not available'} border={false}> <SettingsRow label="User ID" description={auth.user?.id || 'Not available'} border={false}>
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ShieldCheck />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
{/snippet} {/snippet}
<span class="font-mono text-xs text-[hsl(var(--muted-foreground))]" <span class="font-mono text-xs text-[hsl(var(--muted-foreground))]"
>{auth.user?.id || '-'}</span >{auth.user?.id || '-'}</span
@ -82,14 +62,7 @@
<!-- Appearance Section --> <!-- Appearance Section -->
<SettingsSection title="Appearance"> <SettingsSection title="Appearance">
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Sun />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
{/snippet} {/snippet}
<SettingsCard> <SettingsCard>
@ -104,19 +77,7 @@
? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]' ? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
: 'border-[hsl(var(--border))]'}" : 'border-[hsl(var(--border))]'}"
> >
<svg <Sun size={24} class="text-amber-500" />
class="w-6 h-6 text-amber-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span class="text-sm font-medium text-[hsl(var(--foreground))]">Light</span> <span class="text-sm font-medium text-[hsl(var(--foreground))]">Light</span>
</button> </button>
<button <button
@ -126,19 +87,7 @@
? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]' ? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
: 'border-[hsl(var(--border))]'}" : 'border-[hsl(var(--border))]'}"
> >
<svg <Moon size={24} class="text-indigo-500" />
class="w-6 h-6 text-indigo-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
<span class="text-sm font-medium text-[hsl(var(--foreground))]">Dark</span> <span class="text-sm font-medium text-[hsl(var(--foreground))]">Dark</span>
</button> </button>
<button <button
@ -148,19 +97,7 @@
? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]' ? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
: 'border-[hsl(var(--border))]'}" : 'border-[hsl(var(--border))]'}"
> >
<svg <Monitor size={24} class="text-[hsl(var(--muted-foreground))]" />
class="w-6 h-6 text-[hsl(var(--muted-foreground))]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<span class="text-sm font-medium text-[hsl(var(--foreground))]">System</span> <span class="text-sm font-medium text-[hsl(var(--foreground))]">System</span>
</button> </button>
</div> </div>
@ -181,14 +118,7 @@
border={false} border={false}
> >
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <SignOut />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
{/snippet} {/snippet}
</SettingsDangerButton> </SettingsDangerButton>
</SettingsDangerZone> </SettingsDangerZone>

32
apps/times/apps/web/src/routes/(app)/+layout.svelte
View file

@ -9,6 +9,7 @@
import TimerIndicator from '$lib/components/TimerIndicator.svelte'; import TimerIndicator from '$lib/components/TimerIndicator.svelte';
import { theme } from '$lib/stores/theme'; import { theme } from '$lib/stores/theme';
import { setLocale, supportedLocales } from '$lib/i18n'; import { setLocale, supportedLocales } from '$lib/i18n';
import { Clock, User, SignOut, Play } from '@manacore/shared-icons';
import { SyncIndicator } from '@manacore/shared-ui'; import { SyncIndicator } from '@manacore/shared-ui';
import { getPillAppItems, getManaApp } from '@manacore/shared-branding'; import { getPillAppItems, getManaApp } from '@manacore/shared-branding';
import { AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui'; import { AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
@ -103,14 +104,7 @@
<div <div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-[hsl(var(--primary))]" class="flex h-8 w-8 items-center justify-center rounded-lg bg-[hsl(var(--primary))]"
> >
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Clock size={16} class="text-white" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div> </div>
<span class="text-lg font-bold text-[hsl(var(--foreground))]">Times</span> <span class="text-lg font-bold text-[hsl(var(--foreground))]">Times</span>
</a> </a>
@ -149,14 +143,7 @@
href="/profile" href="/profile"
class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <User size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a> </a>
<button <button
@ -164,14 +151,7 @@
class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500" class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500"
title="Abmelden" title="Abmelden"
> >
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <SignOut size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</button> </button>
</div> </div>
</div> </div>
@ -204,9 +184,7 @@
onclick={() => goto('/?action=start')} onclick={() => goto('/?action=start')}
class="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-lg transition-transform hover:scale-105 md:hidden" class="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-lg transition-transform hover:scale-105 md:hidden"
> >
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> <Play size={24} weight="fill" />
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button> </button>
<GuestWelcomeModal <GuestWelcomeModal

10
apps/times/apps/web/src/routes/(app)/clients/[id]/+page.svelte
View file

@ -9,6 +9,7 @@
formatDurationCompact, formatDurationCompact,
formatDurationDecimal, formatDurationDecimal,
} from '$lib/data/queries'; } from '$lib/data/queries';
import { CaretLeft } from '@manacore/shared-icons';
import EntryList from '$lib/components/EntryList.svelte'; import EntryList from '$lib/components/EntryList.svelte';
import type { Project, Client, TimeEntry } from '@times/shared'; import type { Project, Client, TimeEntry } from '@times/shared';
@ -58,14 +59,7 @@
href="/clients" href="/clients"
class="mb-3 inline-flex items-center gap-1 text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="mb-3 inline-flex items-center gap-1 text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <CaretLeft size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg>
{$_('nav.clients')} {$_('nav.clients')}
</a> </a>

10
apps/times/apps/web/src/routes/(app)/projects/[id]/+page.svelte
View file

@ -10,6 +10,7 @@
formatDurationCompact, formatDurationCompact,
formatDurationDecimal, formatDurationDecimal,
} from '$lib/data/queries'; } from '$lib/data/queries';
import { CaretLeft } from '@manacore/shared-icons';
import EntryList from '$lib/components/EntryList.svelte'; import EntryList from '$lib/components/EntryList.svelte';
import type { Project, Client, TimeEntry } from '@times/shared'; import type { Project, Client, TimeEntry } from '@times/shared';
import { PROJECT_COLORS } from '@times/shared/constants'; import { PROJECT_COLORS } from '@times/shared/constants';
@ -98,14 +99,7 @@
href="/projects" href="/projects"
class="mb-3 inline-flex items-center gap-1 text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" class="mb-3 inline-flex items-center gap-1 text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <CaretLeft size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
/>
</svg>
{$_('nav.projects')} {$_('nav.projects')}
</a> </a>

10
apps/times/apps/web/src/routes/(app)/templates/+page.svelte
View file

@ -3,6 +3,7 @@
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { templateCollection, timeEntryCollection } from '$lib/data/local-store'; import { templateCollection, timeEntryCollection } from '$lib/data/local-store';
import { timerStore } from '$lib/stores/timer.svelte'; import { timerStore } from '$lib/stores/timer.svelte';
import { X } from '@manacore/shared-icons';
import type { EntryTemplate, Project, Client } from '@times/shared'; import type { EntryTemplate, Project, Client } from '@times/shared';
const allTemplates = getContext<{ value: EntryTemplate[] }>('templates'); const allTemplates = getContext<{ value: EntryTemplate[] }>('templates');
@ -181,14 +182,7 @@
onclick={() => deleteTemplate(template.id)} onclick={() => deleteTemplate(template.id)}
class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500" class="rounded-lg p-1.5 text-[hsl(var(--muted-foreground))] hover:text-red-500"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <X size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button> </button>
</div> </div>
{/each} {/each}

10
apps/times/apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -2,6 +2,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { Clock } from '@manacore/shared-icons';
import { getPillAppItems } from '@manacore/shared-branding'; import { getPillAppItems } from '@manacore/shared-branding';
let email = $state(''); let email = $state('');
@ -106,14 +107,7 @@
<div <div
class="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-[hsl(var(--primary))]" class="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-[hsl(var(--primary))]"
> >
<svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <Clock size={32} class="text-white" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div> </div>
<h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">Times</h1> <h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">Times</h1>
<p class="mt-1 text-sm text-[hsl(var(--muted-foreground))]">Zeiterfassung</p> <p class="mt-1 text-sm text-[hsl(var(--muted-foreground))]">Zeiterfassung</p>

21
apps/todo/apps/web/src/lib/components/board-views/ViewColumn.svelte
View file

@ -139,17 +139,18 @@
.view-column { .view-column {
min-height: 250px; min-height: 250px;
max-height: calc(100vh - 280px); max-height: calc(100vh - 280px);
background: rgba(255, 255, 255, 0.5); background: #fffef5;
backdrop-filter: blur(12px); border-radius: 0.375rem;
-webkit-backdrop-filter: blur(12px); box-shadow:
border: 1px solid rgba(0, 0, 0, 0.08); 0 2px 8px rgba(0, 0, 0, 0.08),
border-radius: 1.5rem; 0 0 0 1px rgba(0, 0, 0, 0.04);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
} }
:global(.dark) .view-column { :global(.dark) .view-column {
background: rgba(255, 255, 255, 0.08); background: #252220;
border: 1px solid rgba(255, 255, 255, 0.1); box-shadow:
0 2px 8px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.06);
} }
.tasks-container { .tasks-container {
@ -185,7 +186,7 @@
:global(.drop-target) { :global(.drop-target) {
outline: 2px dashed #8b5cf6; outline: 2px dashed #8b5cf6;
outline-offset: -2px; outline-offset: -2px;
border-radius: 1.5rem; border-radius: 0.375rem;
background: rgba(139, 92, 246, 0.05); background: rgba(139, 92, 246, 0.04);
} }
</style> </style>

57
apps/todo/apps/web/src/routes/(app)/settings/+page.svelte
View file

@ -29,6 +29,36 @@
SettingsDangerButton, SettingsDangerButton,
GlobalSettingsSection, GlobalSettingsSection,
} from '@manacore/shared-ui'; } from '@manacore/shared-ui';
import {
User,
EnvelopeSimple,
ShieldCheck,
Rows,
ListBullets,
ClipboardText,
SortAscending,
Clock,
FolderSimple,
Archive,
Lightning,
Trash,
SquaresFour,
House,
Hash,
ChartBar,
Columns,
Tag,
WarningCircle,
Bell,
Eye,
Timer,
SealCheck,
Fire,
GraduationCap,
Key,
Info,
SignOut,
} from '@manacore/shared-icons';
// Use shared priority options (without color) // Use shared priority options (without color)
const priorityOptions = PRIORITY_OPTIONS.map((p) => ({ value: p.value, label: p.label })); const priorityOptions = PRIORITY_OPTIONS.map((p) => ({ value: p.value, label: p.label }));
@ -102,40 +132,19 @@
<!-- Account Section --> <!-- Account Section -->
<SettingsSection title="Konto"> <SettingsSection title="Konto">
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <User size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
{/snippet} {/snippet}
<SettingsCard> <SettingsCard>
<SettingsRow label="E-Mail" description={authStore.user?.email || 'Nicht angemeldet'}> <SettingsRow label="E-Mail" description={authStore.user?.email || 'Nicht angemeldet'}>
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <EnvelopeSimple size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
{/snippet} {/snippet}
</SettingsRow> </SettingsRow>
<SettingsRow label="Konto-Status" description="Dein aktueller Kontostatus" border={false}> <SettingsRow label="Konto-Status" description="Dein aktueller Kontostatus" border={false}>
{#snippet icon()} {#snippet icon()}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <ShieldCheck size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
{/snippet} {/snippet}
<span <span
class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-900/20 dark:text-green-400" class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-900/20 dark:text-green-400"

19
apps/zitare/apps/web/src/routes/(app)/+layout.svelte
View file

@ -41,6 +41,7 @@
import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui'; import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
import { QUOTES, type Quote } from '@zitare/content'; import { QUOTES, type Quote } from '@zitare/content';
import { zitareStore } from '$lib/data/local-store'; import { zitareStore } from '$lib/data/local-store';
import { List as ListIcon, X } from '@manacore/shared-icons';
const allTags = useAllSharedTags(); const allTags = useAllSharedTags();
setContext('tags', allTags); setContext('tags', allTags);
@ -350,23 +351,9 @@
title={zitareSettings.pillNavCollapsed ? $_('nav.showNav') : $_('nav.hideNav')} title={zitareSettings.pillNavCollapsed ? $_('nav.showNav') : $_('nav.hideNav')}
> >
{#if zitareSettings.pillNavCollapsed} {#if zitareSettings.pillNavCollapsed}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon"> <ListIcon size={24} class="fab-icon" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
{:else} {:else}
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon"> <X size={24} class="fab-icon" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
{/if} {/if}
</button> </button>
{/if} {/if}

96
apps/zitare/apps/web/src/routes/(app)/lists/[id]/+page.svelte
View file

@ -10,6 +10,14 @@
import { toast } from '$lib/stores/toast.svelte'; import { toast } from '$lib/stores/toast.svelte';
import { QUOTES, type Quote } from '@zitare/content'; import { QUOTES, type Quote } from '@zitare/content';
import QuoteCard from '$lib/components/QuoteCard.svelte'; import QuoteCard from '$lib/components/QuoteCard.svelte';
import {
MagnifyingGlass,
X,
PencilSimple,
Plus,
ListBullets,
Trash,
} from '@manacore/shared-icons';
const allQuotes = QUOTES; const allQuotes = QUOTES;
const allLists: { readonly value: QuoteList[] } = getContext('lists'); const allLists: { readonly value: QuoteList[] } = getContext('lists');
@ -198,23 +206,11 @@
<div class="header-actions"> <div class="header-actions">
{#if listQuotes.length > 0} {#if listQuotes.length > 0}
<button class="icon-btn" onclick={toggleSearch} aria-label={$_('common.search')}> <button class="icon-btn" onclick={toggleSearch} aria-label={$_('common.search')}>
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> {#if isSearchOpen}
{#if isSearchOpen} <X size={20} />
<path {:else}
stroke-linecap="round" <MagnifyingGlass size={20} />
stroke-linejoin="round" {/if}
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
{:else}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
{/if}
</svg>
</button> </button>
{/if} {/if}
@ -223,14 +219,7 @@
onclick={openEditModal} onclick={openEditModal}
aria-label={$_('lists.detail.editModal.title')} aria-label={$_('lists.detail.editModal.title')}
> >
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <PencilSimple size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</button> </button>
<button <button
@ -238,14 +227,7 @@
onclick={openAddQuotesModal} onclick={openAddQuotesModal}
aria-label={$_('lists.detail.addQuotes')} aria-label={$_('lists.detail.addQuotes')}
> >
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <Plus size={20} weight="bold" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
</button> </button>
</div> </div>
</div> </div>
@ -266,52 +248,19 @@
{#if listQuotes.length === 0} {#if listQuotes.length === 0}
<div class="empty-state"> <div class="empty-state">
<div class="empty-icon"> <div class="empty-icon">
<svg <ListBullets size={64} />
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</div> </div>
<h3>{$_('lists.detail.emptyTitle')}</h3> <h3>{$_('lists.detail.emptyTitle')}</h3>
<p>{$_('lists.detail.emptyDescription')}</p> <p>{$_('lists.detail.emptyDescription')}</p>
<button class="cta-button" onclick={openAddQuotesModal}> <button class="cta-button" onclick={openAddQuotesModal}>
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <Plus size={20} weight="bold" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
{$_('lists.detail.addQuotes')} {$_('lists.detail.addQuotes')}
</button> </button>
</div> </div>
{:else if filteredQuotes.length === 0} {:else if filteredQuotes.length === 0}
<div class="empty-state"> <div class="empty-state">
<div class="empty-icon"> <div class="empty-icon">
<svg <MagnifyingGlass size={64} />
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</div> </div>
<h3>{$_('lists.detail.noSearchResults')}</h3> <h3>{$_('lists.detail.noSearchResults')}</h3>
<p>{$_('lists.detail.noSearchResultsDescription')}</p> <p>{$_('lists.detail.noSearchResultsDescription')}</p>
@ -332,14 +281,7 @@
class="w-4 h-4 border-2 border-red-400 border-t-transparent rounded-full animate-spin" class="w-4 h-4 border-2 border-red-400 border-t-transparent rounded-full animate-spin"
></div> ></div>
{:else} {:else}
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <X size={16} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
{/if} {/if}
{$_('lists.detail.remove')} {$_('lists.detail.remove')}
</button> </button>

56
apps/zitare/apps/web/src/routes/(app)/search/+page.svelte
View file

@ -5,6 +5,7 @@
import { quotesStore } from '$lib/stores/quotes.svelte'; import { quotesStore } from '$lib/stores/quotes.svelte';
import { zitareSettings } from '$lib/stores/settings.svelte'; import { zitareSettings } from '$lib/stores/settings.svelte';
import QuoteCard from '$lib/components/QuoteCard.svelte'; import QuoteCard from '$lib/components/QuoteCard.svelte';
import { MagnifyingGlass, X } from '@manacore/shared-icons';
let searchTerm = $state(''); let searchTerm = $state('');
let lastTrackedTerm = $state(''); let lastTrackedTerm = $state('');
@ -61,19 +62,9 @@
<!-- Search Input --> <!-- Search Input -->
<div class="relative mb-4"> <div class="relative mb-4">
<svg <div class="absolute left-4 top-1/2 -translate-y-1/2 text-foreground-muted">
class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-muted" <MagnifyingGlass size={20} />
fill="none" </div>
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
<input <input
type="text" type="text"
placeholder={$_('search.placeholder')} placeholder={$_('search.placeholder')}
@ -85,14 +76,7 @@
onclick={clearSearch} onclick={clearSearch}
class="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-muted hover:text-foreground transition-colors" class="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-muted hover:text-foreground transition-colors"
> >
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <X size={20} />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button> </button>
{/if} {/if}
</div> </div>
@ -133,20 +117,9 @@
{#if searchTerm.length >= 2} {#if searchTerm.length >= 2}
{#if results.length === 0} {#if results.length === 0}
<div class="text-center py-12"> <div class="text-center py-12">
<svg <div class="w-16 h-16 mx-auto text-foreground-muted mb-4 flex items-center justify-center">
class="w-16 h-16 mx-auto text-foreground-muted mb-4" <MagnifyingGlass size={64} />
fill="none" </div>
viewBox="0 0 24 24"
stroke="currentColor"
>
<circle cx="11" cy="11" r="8" stroke-width="1.5"></circle>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="m21 21-4.35-4.35"
></path>
</svg>
<p class="text-foreground-secondary">{$_('search.noResults')}</p> <p class="text-foreground-secondary">{$_('search.noResults')}</p>
</div> </div>
{:else} {:else}
@ -167,16 +140,11 @@
<p class="text-center text-foreground-muted py-8">{$_('search.minChars')}</p> <p class="text-center text-foreground-muted py-8">{$_('search.minChars')}</p>
{:else} {:else}
<div class="text-center py-12"> <div class="text-center py-12">
<svg <div
class="w-16 h-16 mx-auto text-foreground-muted mb-4 opacity-50" class="w-16 h-16 mx-auto text-foreground-muted mb-4 opacity-50 flex items-center justify-center"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
> >
<circle cx="11" cy="11" r="8" stroke-width="1.5"></circle> <MagnifyingGlass size={64} />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21-4.35-4.35" </div>
></path>
</svg>
<p class="text-foreground-secondary">{$_('search.hint')}</p> <p class="text-foreground-secondary">{$_('search.hint')}</p>
</div> </div>
{/if} {/if}