From 24f772c1122fe964a6c45fd9e8200567f0e05554 Mon Sep 17 00:00:00 2001 From: tizu69 <60812901+tizu69@users.noreply.github.com> Date: Wed, 3 Jan 2024 22:17:54 +0100 Subject: [PATCH] =?UTF-8?q?ship=20it=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/CenterLoader.svelte | 9 --- src/lib/HeaderBar.svelte | 50 +++++++------ src/lib/consts.ts | 1 + src/lib/index.ts | 4 +- src/lib/project/PackageList.svelte | 17 +++-- src/lib/project/PackagePreview.svelte | 12 ++- src/lib/project/Sidebar.svelte | 10 ++- src/lib/stores.ts | 2 + src/routes/+layout.svelte | 16 +++- src/routes/+layout.ts | 2 +- src/routes/p/+page.svelte | 19 +++-- src/routes/s/+page.svelte | 103 ++++++++++++++------------ 12 files changed, 138 insertions(+), 107 deletions(-) delete mode 100644 src/lib/CenterLoader.svelte diff --git a/src/lib/CenterLoader.svelte b/src/lib/CenterLoader.svelte deleted file mode 100644 index 4ce51c4..0000000 --- a/src/lib/CenterLoader.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -
-
- -
-
diff --git a/src/lib/HeaderBar.svelte b/src/lib/HeaderBar.svelte index f5d1d5f..5b70852 100644 --- a/src/lib/HeaderBar.svelte +++ b/src/lib/HeaderBar.svelte @@ -7,8 +7,9 @@ import { IconCheck, IconColorSwatch, IconSearch } from '@tabler/icons-svelte'; import consts from './consts'; import { contextMenu, type ContextMenuItem } from './overlays/contextMenu'; - import { currentSearchStore, userPreferencesStore } from './stores'; + import { currentScrollPosition, currentSearchStore, userPreferencesStore } from './stores'; import { parseInputString } from './utils'; + import { fly } from 'svelte/transition'; function getQuery(): string { return $page.route.id == '/s' ? $page.url.searchParams.get('q') ?? '' : ''; @@ -107,36 +108,39 @@ gridColumns="lg:grid-cols-3 grid-cols-[auto_1fr_auto]" slotDefault="place-self-center" slotTrail="place-self-end" - shadow="shadow-lg" - class="vt-none" + class="vt-none transition-colors" + background={$currentScrollPosition.y > 16 ? 'bg-surface-800/75' : 'bg-transparent'} > - logo + logo -
- + {/if}
{#if thisPackage.dependencies.length > 0 || thisPackage.incompatibilities.length > 0} -
+
{#if thisPackage.dependencies.length > 0}
Depends on
@@ -205,7 +210,7 @@ {/if} {#if docs != ''} -
+
README file
diff --git a/src/routes/s/+page.svelte b/src/routes/s/+page.svelte index 9a32949..c49a343 100644 --- a/src/routes/s/+page.svelte +++ b/src/routes/s/+page.svelte @@ -3,22 +3,21 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import consts from '$lib/consts'; - import { Author, CenterLoader, IconBlank, PackageList } from '$lib/index'; + import { Author, IconBlank, PackageList } from '$lib/index'; import { contextMenu } from '$lib/overlays/contextMenu'; - import { currentSearchStore, packageListStore, packageStatusStore, userPreferencesStore } from '$lib/stores'; + import { + currentSearchStore, + packageListStore, + packageStatusStore, + userPreferencesStore + } from '$lib/stores'; import { filterObjectByKey, generateInputString, initPackageList, parseInputString } from '$lib/utils'; - import { - IconCheck, - IconClearAll, - IconHome, - IconLayoutDashboard, - IconListDetails - } from '@tabler/icons-svelte'; + import { IconCheck, IconClearAll, IconHome, IconLayoutDashboard } from '@tabler/icons-svelte'; import { onMount } from 'svelte'; let state: 'loading' | 'ready' | 'fail' = $packageListStore == undefined ? 'loading' : 'ready'; @@ -93,24 +92,10 @@ {$userPreferencesStore.compact ? 'Use list view' : 'Use compact view'} - {#if queryParams._details != 'i'} - - {/if}

@@ -169,29 +154,46 @@ use:contextMenu={{ initiator: 'left', items: [ + // @ts-expect-error me lazy. be like me. + ...[ + { + label: 'Name (a-z)', + name: 'name' + }, + { + label: 'Author (a-z)', + name: 'author' + }, + { + label: 'Download count', + name: 'downloads' + }, + { + label: 'Views', + name: 'views' + } + ].map(({ label, name }) => ({ + type: 'ITEM', + label, + icon: $userPreferencesStore.sortBy == name ? IconCheck : IconBlank, + // @ts-expect-error me lazy. be like me. + action: () => ($userPreferencesStore.sortBy = name) + })), + // @ts-expect-error me lazy. be like me. + { type: 'SEPARATOR' }, { - label: 'Name (a-z)', - name: 'name' - }, - { - label: 'Author (a-z)', - name: 'author' - }, - { - label: 'Download count', - name: 'downloads' - }, - { - label: 'Views', - name: 'views' + // @ts-expect-error me lazy. be like me. + type: 'ITEM', + label: 'Show details', + icon: queryParams._details == 'i' ? IconCheck : IconBlank, + action: () => { + let q = queryParams; + if (queryParams._details == 'i') delete q._details; + else q._details = 'i'; + goto(`${base}/s?q=${generateInputString(q)}`); + } } - ].map(({ label, name }) => ({ - type: 'ITEM', - label, - icon: $userPreferencesStore.sortBy == name ? IconCheck : IconBlank, - // @ts-expect-error me lazy. be like me. - action: () => ($userPreferencesStore.sortBy = name) - })) + ] }} > {$userPreferencesStore.sortBy != '' @@ -206,7 +208,16 @@ {/if} {#if state == 'loading'} - +
+ {#each Array(5) as _} +
+ {/each} +
{:else if state == 'ready' && resultedFilter.length == 0}

Here, have a cookie, if that makes you feel any better: 🍪