Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-21 11:12:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

extensions ui

Browse source
This commit is contained in:
ThaUnknown 2025-02-12 17:22:54 +01:00
parent 9b1ec67e69
commit e17dcb4a6f
No known key found for this signature in database
2 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/routes/settings/extensions/+page.svelte
View file

@ -1,38 +1,51 @@
<script lang='ts'> <script lang='ts'>
import { Button } from '$lib/components/ui/button' import { saved } from '$lib/modules/extensions'
import { Settings, Trash } from 'lucide-svelte' import ExtensionSettings from './ExtensionSettings.svelte'
const typeMap = {
nzb: 'NZB',
torrent: 'Torrent',
url: 'URL'
}
</script> </script>
<div class='bg-neutral-950 px-5 py-4 rounded-md flex flex-row space-x-3 justify-between w-[500px] max-w-full'> <div class='space-y-3 pb-10'>
<div class='flex flex-col space-y-3'> <div class='font-weight-bold text-xl font-bold'>Extension Settings</div>
<div class='flex flex-row space-x-3'>
<img src='https://releases.moe/favicon.png' alt='ico' class='size-12 rounded-md bg-neutral-900' /> <div class='grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] place-items-center gap-x-10 gap-y-7 justify-center py-3'>
<div class='flex flex-col'> {#each Object.entries($saved) as [id, config] (id)}
<div class='text-lg font-bold'> <div class='bg-neutral-950 px-5 py-4 rounded-md flex flex-row space-x-3 justify-between w-full'>
Seadex <div class='flex flex-col space-y-3'>
</div> <div class='flex flex-row space-x-3'>
<div class='text-sm text-muted-foreground'> <img src={config.icon} alt='ico' class='size-12 rounded-md bg-neutral-900' />
seadex <div class='flex flex-col'>
<div class='text-lg font-bold'>
{config.name}
</div>
<div class='text-sm text-muted-foreground'>
{id}
</div>
</div>
</div>
<div class='flex-wrap w-full justify-start gap-2 flex text-neutral-300 text-sm'>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
{config.version}
</div>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
{typeMap[config.type]}
</div>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug capitalize'>
{config.accuracy} Accuracy
</div>
{#if config.ratio}
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
{config.ratio} Ratio
</div>
{/if}
</div>
</div> </div>
<ExtensionSettings {config} />
</div> </div>
</div> {/each}
<div class='flex-wrap w-full justify-start gap-2 flex text-neutral-300 text-sm'>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
v0.0.1
</div>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
Torrent
</div>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
High Accuracy
</div>
<div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
2.0 Ratio
</div>
</div>
</div>
<div class='flex flex-col space-y-2'>
<Button variant='ghost' size='icon-sm'><Settings size={18} /></Button>
<Button variant='ghost' size='icon-sm'><Trash size={18} /></Button>
</div> </div>
</div> </div>

12
src/routes/settings/extensions/ExtensionSettings.svelte
View file

@ -13,9 +13,11 @@
function deleteExtension () { function deleteExtension () {
storage.delete(config.id) storage.delete(config.id)
} }
$: opts = $exopts[config.id]!
</script> </script>
<div class='flex justify-between flex-col items-end'> <div class='flex justify-between flex-col items-end pb-1.5'>
<Dialog.Root> <Dialog.Root>
<Dialog.Trigger let:builder asChild> <Dialog.Trigger let:builder asChild>
<Button builders={[builder]} variant='ghost' size='icon-sm'><Settings size={18} /></Button> <Button builders={[builder]} variant='ghost' size='icon-sm'><Settings size={18} /></Button>
@ -28,17 +30,17 @@
{#if options.type === 'string'} {#if options.type === 'string'}
<div class='space-y-2'> <div class='space-y-2'>
<Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label> <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
<Input type='text' {id} placeholder={options.default} bind:value={$exopts[config.id].options[id]} /> <Input type='text' {id} placeholder={options.default} bind:value={opts.options[id]} />
</div> </div>
{:else if options.type === 'number'} {:else if options.type === 'number'}
<div class='space-y-2'> <div class='space-y-2'>
<Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label> <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
<Input type='number' {id} placeholder={options.default} bind:value={$exopts[config.id].options[id]} /> <Input type='number' {id} placeholder={options.default} bind:value={opts.options[id]} />
</div> </div>
{:else if options.type === 'boolean'} {:else if options.type === 'boolean'}
<div class='flex items-center space-x-2'> <div class='flex items-center space-x-2'>
<Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label> <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
<Switch {id} bind:checked={$exopts[config.id].options[id]} /> <Switch {id} bind:checked={opts.options[id]} />
</div> </div>
{/if} {/if}
{/each} {/each}
@ -52,5 +54,5 @@
</Dialog.Header> </Dialog.Header>
</Dialog.Content> </Dialog.Content>
</Dialog.Root> </Dialog.Root>
<Switch bind:checked={$exopts[config.id].enabled} hideState={true} /> <Switch bind:checked={opts.enabled} hideState={true} />
</div> </div>