mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 07:59:39 +02:00
fix(contacts): add default title and remove unused network view remnants
- Add default <title>Kontakte</title> to app.html - Remove NetworkGraphSkeleton component - Remove network view option from toolbar, settings, and view-mode store - Remove d3-force, d3-selection, d3-zoom dependencies Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
5d86753e47
commit
a5d270154c
9 changed files with 470 additions and 414 deletions
|
|
@ -18,9 +18,6 @@
|
|||
"@sveltejs/kit": "^2.47.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
"@types/d3-force": "^3.0.10",
|
||||
"@types/d3-selection": "^3.0.11",
|
||||
"@types/d3-zoom": "^3.0.8",
|
||||
"@types/node": "^20.0.0",
|
||||
"@vite-pwa/sveltekit": "^1.1.0",
|
||||
"prettier": "^3.1.1",
|
||||
|
|
@ -54,9 +51,6 @@
|
|||
"@manacore/shared-theme-ui": "workspace:*",
|
||||
"@manacore/shared-ui": "workspace:*",
|
||||
"@manacore/shared-utils": "workspace:*",
|
||||
"d3-force": "^3.0.0",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"svelte-i18n": "^4.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Kontakte</title>
|
||||
%sveltekit.head%
|
||||
<!-- Umami Analytics -->
|
||||
<script defer src="https://stats.mana.how/script.js" data-website-id="d2cc0f01-9e46-4a88-a49b-a365f58b78e7"></script>
|
||||
|
|
|
|||
|
|
@ -64,22 +64,6 @@
|
|||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'network'}
|
||||
onclick={() => viewModeStore.setMode('network')}
|
||||
title={$_('views.network')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { SkeletonBox } from '@manacore/shared-ui';
|
||||
</script>
|
||||
|
||||
<div class="network-skeleton">
|
||||
<!-- Simulated graph nodes -->
|
||||
<div class="skeleton-nodes">
|
||||
{#each Array(8) as _, i}
|
||||
<div
|
||||
class="skeleton-node"
|
||||
style="
|
||||
left: {20 + Math.random() * 60}%;
|
||||
top: {20 + Math.random() * 60}%;
|
||||
animation-delay: {i * 0.1}s;
|
||||
"
|
||||
>
|
||||
<SkeletonBox width="48px" height="48px" borderRadius="50%" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Simulated connections -->
|
||||
<svg class="skeleton-connections" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<line x1="25" y1="30" x2="45" y2="50" class="skeleton-line" />
|
||||
<line x1="45" y1="50" x2="70" y2="35" class="skeleton-line" style="animation-delay: 0.2s" />
|
||||
<line x1="45" y1="50" x2="55" y2="70" class="skeleton-line" style="animation-delay: 0.4s" />
|
||||
<line x1="70" y1="35" x2="80" y2="55" class="skeleton-line" style="animation-delay: 0.6s" />
|
||||
<line x1="30" y1="65" x2="55" y2="70" class="skeleton-line" style="animation-delay: 0.8s" />
|
||||
</svg>
|
||||
|
||||
<!-- Loading text -->
|
||||
<div class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<span>Netzwerk wird geladen...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.network-skeleton {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
background: hsl(var(--background));
|
||||
border-radius: 1rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-nodes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.skeleton-node {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-connections {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
stroke: hsl(var(--muted-foreground) / 0.2);
|
||||
stroke-width: 0.5;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
box-shadow: 0 4px 12px hsl(var(--foreground) / 0.05);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid hsl(var(--muted));
|
||||
border-top-color: hsl(var(--primary));
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -36,6 +36,3 @@ export { default as ContactDetailSkeleton } from './ContactDetailSkeleton.svelte
|
|||
|
||||
// Contact Notes Skeleton
|
||||
export { default as ContactNotesSkeleton } from './ContactNotesSkeleton.svelte';
|
||||
|
||||
// Network Graph Skeleton
|
||||
export { default as NetworkGraphSkeleton } from './NetworkGraphSkeleton.svelte';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { createAppSettingsStore } from '@manacore/shared-stores';
|
|||
// Settings types
|
||||
export type ContactSortBy = 'name' | 'company' | 'created' | 'updated';
|
||||
export type ContactSortOrder = 'asc' | 'desc';
|
||||
export type ContactView = 'grid' | 'alphabet' | 'network';
|
||||
export type ContactView = 'grid' | 'alphabet';
|
||||
export type DateFormat = 'dd.MM.yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
|
||||
|
||||
export interface ContactsAppSettings {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export type ViewMode = ContactView;
|
|||
const STORAGE_KEY = 'contacts-view-mode';
|
||||
|
||||
// Valid view modes
|
||||
const VALID_MODES: ViewMode[] = ['grid', 'alphabet', 'network'];
|
||||
const VALID_MODES: ViewMode[] = ['grid', 'alphabet'];
|
||||
|
||||
function isValidMode(mode: string | null): mode is ViewMode {
|
||||
return mode !== null && VALID_MODES.includes(mode as ViewMode);
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
const viewOptions = [
|
||||
{ value: 'grid', label: 'Kacheln' },
|
||||
{ value: 'alphabet', label: 'Alphabetisch' },
|
||||
{ value: 'network', label: 'Netzwerk' },
|
||||
];
|
||||
|
||||
const sortByOptions = [
|
||||
|
|
|
|||
738
pnpm-lock.yaml
generated
738
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue