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

Merge pull request #338 from maxdorninger/deduplicate-frontend-code

Browse Source 
Organize frontend components into folders
This commit is contained in:
Maximilian Dorninger
2026-01-03 13:30:01 +01:00
committed by GitHub
parent 6f8e73c90e 54b99a67e5
commit 5caf9169bf
29 changed files with 77 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/lib/components/login-card.svelte → web/src/lib/components/auth/login-card.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { goto } from '$app/navigation';
import { toast } from 'svelte-sonner';
import * as Alert from '$lib/components/ui/alert/index.js';
import * as Alert from '$lib/components/ui/alert';
import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
import LoadingBar from '$lib/components/loading-bar.svelte';
import client from '$lib/api';

10
web/src/lib/components/signup-card.svelte → web/src/lib/components/auth/signup-card.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { toast } from 'svelte-sonner';
import * as Alert from '$lib/components/ui/alert/index.js';
import * as Alert from '$lib/components/ui/alert';
import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
import LoadingBar from '$lib/components/loading-bar.svelte';
import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2';

70
web/src/lib/components/chip.svelte
View File

@@ -1,70 +0,0 @@
<script lang="ts">
import { cn } from '$lib/utils'; // Assuming you have the cn utility from shadcn-svelte
type Variant = 'default' | 'secondary' | 'outline' | 'destructive';
type Size = 'default' | 'sm' | 'lg';
let {
label,
variant = 'default',
size = 'default',
onClose = undefined,
class: className = ''
} = $props<{
label: string;
variant?: Variant;
size?: Size;
onClose?: () => void;
class?: string;
}>();
// Base styles for the chip
const baseStyles =
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
// Variant styles
const variantStyles: Record<Variant, string> = {
default:
'border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90'
};
// Size styles
const sizeStyles: Record<Size, string> = {
default: 'h-9 px-3 py-0.5', // Adjusted height for New York style
sm: 'h-7 px-2 py-0.5 text-xs', // Adjusted height for New York style
lg: 'h-10 px-4 py-0.5' // Adjusted height for New York style
};
// Styles for the close button
const closeButtonStyles =
'ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full';
</script>
<div class={cn(baseStyles, variantStyles[variant as Variant], sizeStyles[size as Size], className)}>
{label}
{#if onClose}
<button
class={cn(closeButtonStyles, 'hover:bg-accent-foreground/20')}
onclick={onClose}
aria-label="remove tag"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3"
>
<path d="M18 6L6 18" />
<path d="M6 6L18 18" />
</svg>
</button>
{/if}
</div>

12
web/src/lib/components/download-movie-dialog.svelte → web/src/lib/components/download-dialogs/download-movie-dialog.svelte
View File

@@ -1,16 +1,16 @@
<script lang="ts">
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import { Button, buttonVariants } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { toast } from 'svelte-sonner';
import { Badge } from '$lib/components/ui/badge/index.js';
import { Badge } from '$lib/components/ui/badge';
import { ArrowDown, ArrowUp, LoaderCircle } from 'lucide-svelte';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import * as Tabs from '$lib/components/ui/tabs/index.js';
import * as Table from '$lib/components/ui/table/index.js';
import * as Dialog from '$lib/components/ui/dialog';
import * as Tabs from '$lib/components/ui/tabs';
import * as Table from '$lib/components/ui/table';
import client from '$lib/api';
import SelectFilePathSuffixDialog from '$lib/components/select-file-path-suffix-dialog.svelte';
import SelectFilePathSuffixDialog from '$lib/components/download-dialogs/select-file-path-suffix-dialog.svelte';
import { invalidateAll } from '$app/navigation';
let { movie } = $props();

21
web/src/lib/components/download-season-dialog.svelte → web/src/lib/components/download-dialogs/download-season-dialog.svelte
View File

@@ -1,17 +1,20 @@
<script lang="ts">
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js';
import { Button, buttonVariants } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { toast } from 'svelte-sonner';
import { convertTorrentSeasonRangeToIntegerRange, formatSecondsToOptimalUnit } from '$lib/utils';
import {
convertTorrentSeasonRangeToIntegerRange,
formatSecondsToOptimalUnit
} from '$lib/utils.ts';
import { ArrowDown, ArrowUp, LoaderCircle } from 'lucide-svelte';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import * as Tabs from '$lib/components/ui/tabs/index.js';
import * as Table from '$lib/components/ui/table/index.js';
import { Badge } from '$lib/components/ui/badge/index.js';
import * as Dialog from '$lib/components/ui/dialog';
import * as Tabs from '$lib/components/ui/tabs';
import * as Table from '$lib/components/ui/table';
import { Badge } from '$lib/components/ui/badge';
import client from '$lib/api';
import type { components } from '$lib/api/api';
import SelectFilePathSuffixDialog from '$lib/components/select-file-path-suffix-dialog.svelte';
import SelectFilePathSuffixDialog from '$lib/components/download-dialogs/select-file-path-suffix-dialog.svelte';
import { invalidateAll } from '$app/navigation';
let { show }: { show: components['schemas']['Show'] } = $props();

6
web/src/lib/components/file-path-suffix-selector.svelte → web/src/lib/components/download-dialogs/file-path-suffix-selector.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts">
import { Label } from '$lib/components/ui/label/index.js';
import * as Select from '$lib/components/ui/select/index.js';
import { Label } from '$lib/components/ui/label';
import * as Select from '$lib/components/ui/select';
import { saveDirectoryPreview } from '$lib/utils.js';
import type { components } from '$lib/api/api';
import * as Tabs from '$lib/components/ui/tabs/index.js';
import * as Tabs from '$lib/components/ui/tabs';
import { Input } from '$lib/components/ui/input';
let {

6
web/src/lib/components/select-file-path-suffix-dialog.svelte → web/src/lib/components/download-dialogs/select-file-path-suffix-dialog.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import FilePathSuffixSelector from '$lib/components/file-path-suffix-selector.svelte';
import { Button } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import FilePathSuffixSelector from '$lib/components/download-dialogs/file-path-suffix-selector.svelte';
import type { components } from '$lib/api/api';
let {

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

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

8
web/src/lib/components/app-sidebar.svelte → web/src/lib/components/nav/app-sidebar.svelte
View File

@@ -93,10 +93,10 @@
</script>
<script lang="ts">
import NavMain from '$lib/components/nav-main.svelte';
import NavSecondary from '$lib/components/nav-secondary.svelte';
import NavUser from '$lib/components/nav-user.svelte';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import NavMain from '$lib/components/nav/nav-main.svelte';
import NavSecondary from '$lib/components/nav/nav-secondary.svelte';
import NavUser from '$lib/components/nav/nav-user.svelte';
import * as Sidebar from '$lib/components/ui/sidebar';
import type { ComponentProps } from 'svelte';
import logo from '$lib/images/logo.svg';

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

@@ -1,6 +1,6 @@
<script lang="ts">
import * as Collapsible from '$lib/components/ui/collapsible/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Collapsible from '$lib/components/ui/collapsible';
import * as Sidebar from '$lib/components/ui/sidebar';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
let {

6
web/src/lib/components/nav-projects.svelte → web/src/lib/components/nav/nav-projects.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import { useSidebar } from '$lib/components/ui/sidebar/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as Sidebar from '$lib/components/ui/sidebar';
import { useSidebar } from '$lib/components/ui/sidebar';
import Ellipsis from '@lucide/svelte/icons/ellipsis';
import Folder from '@lucide/svelte/icons/folder';
import Share from '@lucide/svelte/icons/share';

2
web/src/lib/components/nav-secondary.svelte → web/src/lib/components/nav/nav-secondary.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Sidebar from '$lib/components/ui/sidebar';
import type { ComponentProps } from 'svelte';
import Sun from '@lucide/svelte/icons/sun';
import Moon from '@lucide/svelte/icons/moon';

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

@@ -1,10 +1,10 @@
<script lang="ts">
import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
import LogOut from '@lucide/svelte/icons/log-out';
import * as Avatar from '$lib/components/ui/avatar/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import { useSidebar } from '$lib/components/ui/sidebar/index.js';
import * as Avatar from '$lib/components/ui/avatar';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as Sidebar from '$lib/components/ui/sidebar';
import { useSidebar } from '$lib/components/ui/sidebar';
import UserDetails from './user-details.svelte';
import UserRound from '@lucide/svelte/icons/user-round';
import { handleLogout } from '$lib/utils.ts';

0
web/src/lib/components/user-details.svelte → web/src/lib/components/nav/user-details.svelte
View File

6
web/src/lib/components/request-movie-dialog.svelte → web/src/lib/components/requests/request-movie-dialog.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import { Button, buttonVariants } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import { Label } from '$lib/components/ui/label';
import * as Select from '$lib/components/ui/select/index.js';
import * as Select from '$lib/components/ui/select';
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils.js';
import { toast } from 'svelte-sonner';

6
web/src/lib/components/request-season-dialog.svelte → web/src/lib/components/requests/request-season-dialog.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import { Button, buttonVariants } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import { Label } from '$lib/components/ui/label';
import * as Select from '$lib/components/ui/select/index.js';
import * as Select from '$lib/components/ui/select';
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils.js';
import { toast } from 'svelte-sonner';

4
web/src/lib/components/season-requests-table.svelte → web/src/lib/components/requests/requests-table.svelte
View File

@@ -3,9 +3,9 @@
import CheckmarkX from '$lib/components/checkmark-x.svelte';
import type { components } from '$lib/api/api';
import * as Table from '$lib/components/ui/table/index.js';
import * as Table from '$lib/components/ui/table';
import { getContext } from 'svelte';
import { Button } from '$lib/components/ui/button/index.js';
import { Button } from '$lib/components/ui/button';
import { toast } from 'svelte-sonner';
import { goto, invalidateAll } from '$app/navigation';
import { resolve } from '$app/paths';

4
web/src/lib/components/delete-torrent-dialog.svelte → web/src/lib/components/torrents/delete-torrent-dialog.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import { Button, buttonVariants } from '$lib/components/ui/button';
import { Label } from '$lib/components/ui/label';
import { toast } from 'svelte-sonner';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import * as Dialog from '$lib/components/ui/dialog';
import client from '$lib/api';
import { Checkbox } from '$lib/components/ui/checkbox';
import { invalidateAll } from '$app/navigation';

4
web/src/lib/components/edit-torrent-dialog.svelte → web/src/lib/components/torrents/edit-torrent-dialog.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Dialog from '$lib/components/ui/dialog/index.js';
import { Button } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import type { components } from '$lib/api/api';
import { Switch } from '$lib/components/ui/switch';
import { Label } from '$lib/components/ui/label';

8
web/src/lib/components/torrent-table.svelte → web/src/lib/components/torrents/torrent-table.svelte
View File

@@ -5,14 +5,14 @@
getTorrentStatusString
} from '$lib/utils.js';
import CheckmarkX from '$lib/components/checkmark-x.svelte';
import * as Table from '$lib/components/ui/table/index.js';
import * as Table from '$lib/components/ui/table';
import type { components } from '$lib/api/api';
import { getContext } from 'svelte';
import { Button } from '$lib/components/ui/button/index.js';
import { Button } from '$lib/components/ui/button';
import client from '$lib/api';
import { toast } from 'svelte-sonner';
import DeleteTorrentDialog from '$lib/components/delete-torrent-dialog.svelte';
import EditTorrentDialog from '$lib/components/edit-torrent-dialog.svelte';
import DeleteTorrentDialog from '$lib/components/torrents/delete-torrent-dialog.svelte';
import EditTorrentDialog from '$lib/components/torrents/edit-torrent-dialog.svelte';
import { invalidateAll } from '$app/navigation';
let {
torrents,

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

@@ -1,5 +1,5 @@
<script lang="ts">
import AppSidebar from '$lib/components/app-sidebar.svelte';
import AppSidebar from '$lib/components/nav/app-sidebar.svelte';
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import type { LayoutProps } from './$types';
import { setContext } from 'svelte';

6
web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
View File

@@ -8,10 +8,10 @@
import type { components } from '$lib/api/api';
import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
import { page } from '$app/state';
import TorrentTable from '$lib/components/torrent-table.svelte';
import TorrentTable from '$lib/components/torrents/torrent-table.svelte';
import MediaPicture from '$lib/components/media-picture.svelte';
import DownloadMovieDialog from '$lib/components/download-movie-dialog.svelte';
import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
import DownloadMovieDialog from '$lib/components/download-dialogs/download-movie-dialog.svelte';
import RequestMovieDialog from '$lib/components/requests/request-movie-dialog.svelte';
import LibraryCombobox from '$lib/components/library-combobox.svelte';
import { resolve } from '$app/paths';
import * as Card from '$lib/components/ui/card/index.js';

2
web/src/routes/dashboard/movies/requests/+page.svelte
View File

@@ -3,7 +3,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 RequestsTable from '$lib/components/season-requests-table.svelte';
import RequestsTable from '$lib/components/requests/requests-table.svelte';
import { resolve } from '$app/paths';
let requests = $derived(page.data.requestsData);

2
web/src/routes/dashboard/movies/torrents/+page.svelte
View File

@@ -5,7 +5,7 @@
import { getFullyQualifiedMediaName } from '$lib/utils';
import * as Accordion from '$lib/components/ui/accordion/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import TorrentTable from '$lib/components/torrent-table.svelte';
import TorrentTable from '$lib/components/torrents/torrent-table.svelte';
import { resolve } from '$app/paths';
import { page } from '$app/state';
</script>

6
web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
View File

@@ -8,11 +8,11 @@
import { getContext } from 'svelte';
import type { components } from '$lib/api/api';
import { getFullyQualifiedMediaName } from '$lib/utils';
import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte';
import DownloadSeasonDialog from '$lib/components/download-dialogs/download-season-dialog.svelte';
import CheckmarkX from '$lib/components/checkmark-x.svelte';
import { page } from '$app/state';
import TorrentTable from '$lib/components/torrent-table.svelte';
import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
import TorrentTable from '$lib/components/torrents/torrent-table.svelte';
import RequestSeasonDialog from '$lib/components/requests/request-season-dialog.svelte';
import MediaPicture from '$lib/components/media-picture.svelte';
import { Switch } from '$lib/components/ui/switch/index.js';
import { toast } from 'svelte-sonner';

2
web/src/routes/dashboard/tv/requests/+page.svelte
View File

@@ -3,7 +3,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 RequestsTable from '$lib/components/season-requests-table.svelte';
import RequestsTable from '$lib/components/requests/requests-table.svelte';
import { resolve } from '$app/paths';
import type { components } from '$lib/api/api';

2
web/src/routes/dashboard/tv/torrents/+page.svelte
View File

@@ -6,7 +6,7 @@
import { getFullyQualifiedMediaName } from '$lib/utils';
import * as Accordion from '$lib/components/ui/accordion/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import TorrentTable from '$lib/components/torrent-table.svelte';
import TorrentTable from '$lib/components/torrents/torrent-table.svelte';
import { resolve } from '$app/paths';
</script>

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

@@ -1,5 +1,5 @@
<script lang="ts">
import LoginCard from '$lib/components/login-card.svelte';
import LoginCard from '$lib/components/auth/login-card.svelte';
import { page } from '$app/state';
import type { components } from '$lib/api/api';
let loginMetaData: components['schemas']['AuthMetadata'] = $derived(page.data.loginData);

2
web/src/routes/login/signup/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import SignupCard from '$lib/components/signup-card.svelte';
import SignupCard from '$lib/components/auth/signup-card.svelte';
import { page } from '$app/state';
let oauthProviders: string[] = $derived(page.data.oauthProviders);