starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-17 21:54:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update user navigation and add logo component for improved branding

Browse Source
This commit is contained in:
maxDorninger
2025-05-19 19:56:37 +02:00
parent 30007702db
commit 0894772e86
13 changed files with 363 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
logo.svg Normal file
View File

@@ -0,0 +1,158 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"
id="svg1"
width="2000"
height="2000"
viewBox="0 0 2000 2000"
sodipodi:docname="logo.svg"
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
xmlns="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1">
<path
d="M 0,1500 H 1500 V 0 H 0 Z"
id="path1"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path3"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4">
<path
d="M 162.861,1482.87 H 1561.64 V 291.538 H 162.861 Z"
transform="translate(-1227.7596,-574.95099)"
id="path4"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath6">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path6"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath7">
<path
d="M 57.6551,1352.2 H 1456.43 V 160.865 H 57.6551 Z"
transform="translate(-1122.5541,-444.27759)"
id="path7"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath9">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path9"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath10">
<path
d="M -61.6302,1208.46 H 1337.15 V 17.1253 H -61.6302 Z"
transform="translate(-1003.2687,-300.53828)"
id="path10"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath12">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path12"/>
</clipPath>
</defs>
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="0.9075"
inkscape:cx="999.44904"
inkscape:cy="1000"
inkscape:window-width="3840"
inkscape:window-height="2054"
inkscape:window-x="3373"
inkscape:window-y="199"
inkscape:window-maximized="1"
inkscape:current-layer="g1">
<inkscape:page
x="0"
y="0"
inkscape:label="1"
id="page1"
width="2000"
height="2000"
margin="0"
bleed="0"/>
</sodipodi:namedview>
<g
id="g1"
inkscape:groupmode="layer"
inkscape:label="1">
<g
id="g2"
clip-path="url(#clipPath3)">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
style="fill:#9ed8f7;fill-opacity:0;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
clip-path="url(#clipPath1)"
id="path2"/>
</g>
<g
opacity="0.720001"
id="g5"
clip-path="url(#clipPath6)">
<path
d="m 0,0 -662.988,-241.307 c -68.294,-24.856 -140.454,25.942 -140.088,98.618 l 3.371,669.629 c 0.22,43.692 27.626,82.623 68.683,97.567 L -68.034,865.813 C 0.26,890.67 72.42,839.872 72.054,767.196 L 68.683,97.566 C 68.463,53.876 41.057,14.943 0,0"
style="fill:#2842fc;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1637.0128,1233.3987)"
clip-path="url(#clipPath4)"
id="path5"/>
</g>
<g
opacity="0.720001"
id="g8"
clip-path="url(#clipPath9)">
<path
d="m 0,0 -662.988,-241.307 c -68.293,-24.856 -140.454,25.942 -140.088,98.618 l 3.371,669.629 c 0.22,43.692 27.626,82.623 68.683,97.567 L -68.034,865.813 C 0.26,890.67 72.42,839.872 72.054,767.196 L 68.683,97.566 C 68.463,53.876 41.057,14.943 0,0"
style="fill:#ff5e00;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1496.7387,1407.6299)"
clip-path="url(#clipPath7)"
id="path8"/>
</g>
<g
opacity="0.75"
id="g11"
clip-path="url(#clipPath12)">
<path
d="m 0,0 -662.988,-241.307 c -68.294,-24.856 -140.454,25.942 -140.088,98.618 l 3.371,669.629 c 0.22,43.692 27.626,82.623 68.683,97.567 L -68.034,865.814 C 0.26,890.67 72.42,839.872 72.054,767.196 L 68.683,97.566 C 68.463,53.876 41.057,14.943 0,0"
style="fill:#f20a4c;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1337.6916,1599.2823)"
clip-path="url(#clipPath10)"
id="path11"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

2
web/src/app.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="%sveltekit.assets%/favicon.png" rel="icon"/>
<link href="%sveltekit.assets%/favicon.ico" rel="icon"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
%sveltekit.head%
</head>

14
web/src/lib/components/app-sidebar.svelte
View File

@@ -63,6 +63,8 @@
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import Command from '@lucide/svelte/icons/command';
import type {ComponentProps} from 'svelte';
import logo from '$lib/images/logo.svg';
import {base} from "$app/paths";
let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
</script>
@@ -73,15 +75,11 @@
<Sidebar.MenuItem>
<Sidebar.MenuButton size="lg">
{#snippet child({props})}
<a href="##" {...props}>
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
>
<Command class="size-4"/>
</div>
<a href="{base}/dashboard" {...props}>
<img class="size-12" src={logo} alt="Media Manager Logo"/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Acme Inc</span>
<span class="truncate text-xs">Enterprise</span>
<span class="truncate font-semibold">Media Manager</span>
<span class="truncate text-xs">version? or smth else?</span>
</div>
</a>
{/snippet}

10
web/src/lib/components/logo-side-by-side.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
import logo from '$lib/images/logo.svg';
let props = $props();
</script>
<div {...props} class="flex items-center">
<img alt="Logo" class="h-12 w-12 mr-2" src={logo}/>
<span class="text-3xl font-bold">Media Manager</span>
</div>

4
web/src/lib/components/nav-user.svelte
View File

@@ -51,7 +51,9 @@
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar.Root class="h-8 w-8 rounded-lg">
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
<Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
<Avatar.Fallback class="rounded-lg">
<UserRound/>
</Avatar.Fallback>
</Avatar.Root>
<div class="grid flex-1 text-left text-sm leading-tight">
<UserDetails/>

158
web/src/lib/images/logo.svg Normal file
View File

@@ -0,0 +1,158 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"
id="svg1"
width="2000"
height="2000"
viewBox="0 0 2000 2000"
sodipodi:docname="logo2.svg"
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
xmlns="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1">
<path
d="M 0,1500 H 1500 V 0 H 0 Z"
id="path1"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path3"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4">
<path
d="M -17.6886,1032.99 H 1106.27 V 238.53 H -17.6886 Z"
transform="translate(-319.61281,-1032.9941)"
id="path4"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath6">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path6"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath7">
<path
d="M 223.314,1226.85 H 1182.49 V 548.867 H 223.314 Z"
transform="translate(-894.64255,-548.86681)"
id="path7"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath9">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path9"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath10">
<path
d="M 301.561,1098.17 H 1517.73 V 238.53 H 301.561 Z"
transform="translate(-666.53282,-1098.1678)"
id="path10"/>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath12">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
id="path12"/>
</clipPath>
</defs>
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="0.9075"
inkscape:cx="999.44904"
inkscape:cy="1000"
inkscape:window-width="3840"
inkscape:window-height="2054"
inkscape:window-x="3373"
inkscape:window-y="199"
inkscape:window-maximized="1"
inkscape:current-layer="g1">
<inkscape:page
x="0"
y="0"
inkscape:label="1"
id="page1"
width="2000"
height="2000"
margin="0"
bleed="0"/>
</sodipodi:namedview>
<g
id="g1"
inkscape:groupmode="layer"
inkscape:label="1">
<g
id="g2"
clip-path="url(#clipPath3)">
<path
d="M 0,0 H 1500 V 1500 H 0 Z"
style="fill:#9ed8f7;fill-opacity:0;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,0,2000)"
clip-path="url(#clipPath1)"
id="path2"/>
</g>
<g
opacity="0.720001"
id="g5"
clip-path="url(#clipPath6)">
<path
d="m 0,0 h 669.787 c 68.994,0 116.873,-68.746 92.95,-133.46 L 542.309,-729.728 c -14.382,-38.904 -51.472,-64.736 -92.95,-64.736 h -669.787 c -68.994,0 -116.873,68.746 -92.949,133.46 L -92.949,-64.736 C -78.567,-25.832 -41.478,0 0,0"
style="fill:#2842fc;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,426.1504,622.67453)"
clip-path="url(#clipPath4)"
id="path5"/>
</g>
<g
opacity="0.720001"
id="g8"
clip-path="url(#clipPath9)">
<path
d="m 0,0 h -571.59 c -58.879,0 -99.738,58.667 -79.322,113.893 l 188.111,508.849 c 12.274,33.201 43.925,55.246 79.322,55.246 h 571.59 c 58.879,0 99.739,-58.667 79.322,-113.894 L 79.322,55.245 C 67.049,22.045 35.397,0 0,0"
style="fill:#ff5e00;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1192.8567,1268.1776)"
clip-path="url(#clipPath7)"
id="path8"/>
</g>
<g
opacity="0.75"
id="g11"
clip-path="url(#clipPath12)">
<path
d="m 0,0 h 724.733 c 74.654,0 126.46,-74.386 100.575,-144.408 L 586.797,-789.591 c -15.562,-42.096 -55.694,-70.047 -100.575,-70.047 h -724.733 c -74.654,0 -126.461,74.386 -100.574,144.409 l 238.511,645.182 C -85.013,-27.952 -44.88,0 0,0"
style="fill:#f20a4c;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,888.7104,535.77627)"
clip-path="url(#clipPath10)"
id="path11"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

3
web/src/routes/dashboard/+layout.server.ts
View File

@@ -1,6 +1,7 @@
import {env} from '$env/dynamic/public';
import type {LayoutServerLoad} from './$types';
import {redirect} from '@sveltejs/kit';
import {base} from "$app/paths";
const apiUrl = env.PUBLIC_API_URL;
@@ -14,7 +15,7 @@ export const load: LayoutServerLoad = async ({fetch}) => {
});
if (!response.ok) {
console.log('unauthorized, redirecting to login');
throw redirect(303, '/login');
throw redirect(303, base + '/login');
}
return {user: await response.json()};
};

3
web/src/routes/dashboard/+layout.svelte
View File

@@ -4,11 +4,12 @@
import type {LayoutProps} from './$types';
import {setContext} from 'svelte';
import {goto} from '$app/navigation';
import {base} from "$app/paths";
let {data, children}: LayoutProps = $props();
console.log('Received User Data: ', data.user);
if (!data.user.is_verified) {
goto('/login/verify')
goto(base + '/login/verify')
}
setContext('user', () => data.user);
</script>

3
web/src/routes/dashboard/+page.svelte
View File

@@ -2,6 +2,7 @@
import {Separator} from '$lib/components/ui/separator/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {base} from "$app/paths";
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
@@ -11,7 +12,7 @@
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>

14
web/src/routes/login/+page.svelte
View File

@@ -1,7 +1,15 @@
<script lang="ts">
import LoginForm from '$lib/components/login-form.svelte';
import Logo from '$lib/components/logo-side-by-side.svelte';
</script>
<div class="flex h-screen w-full items-center justify-center px-4">
<LoginForm/>
</div>
<div class="flex h-screen w-full items-center justify-center px-4 pt-16">
<div class="flex flex-col items-center">
<!-- Ensure Logo doesn't inherit conflicting styles -->
<div class="mb-16 scale-150">
<Logo/>
</div>
<LoginForm/>
</div>
</div>

53
web/src/routes/login/verify/+page.svelte
View File

@@ -1,11 +1,19 @@
<script lang="ts">
import {UserCheck} from 'lucide-svelte';
import {Button} from '$lib/components/ui/button/index.js';
import Logo from '$lib/components/logo-side-by-side.svelte';
</script>
<div class="flex min-h-screen flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
<div class="absolute top-4 left-4">
<Logo/>
</div>
<div class="mx-auto w-full max-w-md text-center">
<div class="mb-6">
<div class="mb-6">
<UserCheck class="mx-auto h-16 w-16 text-primary"/>
</div>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -24,45 +32,4 @@
<p class="mt-10 text-sm text-muted-foreground end">
If you have any questions, please contact an administrator.</p>
</div>
</div>
<style>
/* Assuming you have Tailwind CSS with Shadcn Svelte theme variables configured */
/* Otherwise, you might need to define these colors or use your own classes */
.bg-background {
background-color: hsl(var(--background));
}
.text-primary {
color: hsl(var(--primary));
}
.text-foreground {
color: hsl(var(--foreground));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.bg-primary {
background-color: hsl(var(--primary));
}
.text-primary-foreground {
color: hsl(var(--primary-foreground));
}
.ring-ring {
--tw-ring-color: hsl(var(--ring));
}
.ring-offset-background {
--tw-ring-offset-color: hsl(var(--background));
}
.hover\:bg-primary\/90:hover {
background-color: hsl(var(--primary) / 0.9);
}
</style>
</div>

BIN
web/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
web/static/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB