feat/search-improvements resolve conflicts

Author: alexdln

.env.example

@@ -1,2 +1,2 @@
-#secure password, can use openssl rand --hex 32
+#secure password, can use openssl rand -hex 32
 NUXT_SESSION_PASSWORD=""

app/assets/main.css

@@ -7,17 +7,17 @@
 
 :root[data-theme='dark'] {
   /* background colors */
-  --bg: oklch(0.145 0 0);
-  --bg-subtle: oklch(0.178 0 0);
-  --bg-muted: oklch(0.218 0 0);
-  --bg-elevated: oklch(0.252 0 0);
+  --bg: var(--bg-color, oklch(0.145 0 0));
+  --bg-subtle: var(--bg-subtle-color, oklch(0.178 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.218 0 0));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0));
 
   /* text colors */
   --fg: oklch(0.985 0 0);
   --fg-muted: oklch(0.709 0 0);
   --fg-subtle: oklch(0.633 0 0);
 
-  /* border, seperator colors */
+  /* border, separator colors */
   --border: oklch(0.269 0 0);
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
@@ -43,11 +43,39 @@
   --badge-pink: oklch(0.584 0.189 343);
 }
 
+:root[data-theme='dark'][data-bg-theme='slate'] {
+  --bg: oklch(0.129 0.012 264.695);
+  --bg-subtle: oklch(0.159 0.022 262.421);
+  --bg-muted: oklch(0.204 0.033 261.234);
+  --bg-elevated: oklch(0.259 0.041 260.031);
+}
+
+:root[data-theme='dark'][data-bg-theme='zinc'] {
+  --bg: oklch(0.141 0.005 285.823);
+  --bg-subtle: oklch(0.168 0.005 285.894);
+  --bg-muted: oklch(0.209 0.005 285.929);
+  --bg-elevated: oklch(0.256 0.006 286.033);
+}
+
+:root[data-theme='dark'][data-bg-theme='stone'] {
+  --bg: oklch(0.147 0.004 49.25);
+  --bg-subtle: oklch(0.178 0.004 49.321);
+  --bg-muted: oklch(0.218 0.004 49.386);
+  --bg-elevated: oklch(0.252 0.007 34.298);
+}
+
+:root[data-theme='dark'][data-bg-theme='black'] {
+  --bg: oklch(0 0 0);
+  --bg-subtle: oklch(0.148 0 0);
+  --bg-muted: oklch(0.204 0 0);
+  --bg-elevated: oklch(0.264 0 0);
+}
+
 :root[data-theme='light'] {
-  --bg: oklch(1 0 0);
-  --bg-subtle: oklch(0.979 0.001 286.375);
-  --bg-muted: oklch(0.955 0 0);
-  --bg-elevated: oklch(0.94 0 0);
+  --bg: var(--bg-color, oklch(1 0 0));
+  --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
+  --bg-muted: var(--bg-muted-color, oklch(0.955 0 0));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0));
 
   --fg: oklch(0.145 0 0);
   --fg-muted: oklch(0.439 0 0);
@@ -75,6 +103,27 @@
   --badge-cyan: oklch(0.571 0.181 210);
 }
 
+:root[data-theme='light'][data-bg-theme='slate'] {
+  --bg: oklch(1 0 0);
+  --bg-subtle: oklch(0.982 0.006 264.62);
+  --bg-muted: oklch(0.96 0.041 261.234);
+  --bg-elevated: oklch(0.943 0.013 255.52);
+}
+
+:root[data-theme='light'][data-bg-theme='zinc'] {
+  --bg: oklch(1 0 0);
+  --bg-subtle: oklch(0.979 0.004 286.53);
+  --bg-muted: oklch(0.958 0.004 286.39);
+  --bg-elevated: oklch(0.939 0.004 286.32);
+}
+
+:root[data-theme='light'][data-bg-theme='stone'] {
+  --bg: oklch(1 0 0);
+  --bg-subtle: oklch(0.979 0.005 48.762);
+  --bg-muted: oklch(0.958 0.005 48.743);
+  --bg-elevated: oklch(0.943 0.005 48.731);
+}
+
 @media (prefers-contrast: more) {
   :root[data-theme='dark'] {
     /* text colors */
@@ -199,6 +248,14 @@ button {
   background: #404040;
 }
 
+/* Scrollbar styling for Firefox */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) var(--bg);
+  }
+}
+
 /* Shiki theme colors */
 html.light .shiki,
 html.light .shiki span {

app/components/BaseCard.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  /** Whether this is an exact match for the query */
+  isExactMatch?: boolean
+}>()
+</script>
+
+<template>
+  <article
+    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
+    :class="{
+      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
+    }"
+  >
+    <!-- Glow effect for exact matches -->
+    <div
+      v-if="isExactMatch"
+      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
+      aria-hidden="true"
+    />
+    <slot />
+  </article>
+</template>

app/components/ColumnPicker.vue

@@ -42,7 +42,7 @@ const columnLabelKey: Record<string, string> = {
   version: 'filters.columns.version',
   description: 'filters.columns.description',
   downloads: 'filters.columns.downloads',
-  updated: 'filters.columns.updated',
+  updated: 'filters.columns.published',
   maintainers: 'filters.columns.maintainers',
   keywords: 'filters.columns.keywords',
   qualityScore: 'filters.columns.quality_score',

app/components/Filter/Panel.vue

@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            class="input-base"
+            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
             @input="handleTextInput"
           />
         </div>

app/components/Package/Card.vue

@@ -37,18 +37,7 @@ const pkgDescription = useMarkdown(() => ({
 </script>
 
 <template>
-  <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
-    :class="{
-      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
-    }"
-  >
-    <!-- Glow effect for exact matches -->
-    <div
-      v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
-      aria-hidden="true"
-    />
+  <BaseCard :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -102,7 +91,7 @@ const pkgDescription = useMarkdown(() => ({
               <dd class="font-mono">{{ result.package.publisher.username }}</dd>
             </div>
             <div v-if="result.package.date" class="flex items-center gap-1.5">
-              <dt class="sr-only">{{ $t('package.card.updated') }}</dt>
+              <dt class="sr-only">{{ $t('package.card.published') }}</dt>
               <dd>
                 <DateTime
                   :datetime="result.package.date"
@@ -185,5 +174,5 @@ const pkgDescription = useMarkdown(() => ({
         {{ keyword }}
       </button>
     </div>
-  </article>
+  </BaseCard>
 </template>

app/components/Package/ListControls.vue

@@ -33,7 +33,7 @@ const sortOptions = computed(
   () =>
     [
       { value: 'downloads', label: $t('package.sort.downloads') },
-      { value: 'updated', label: $t('package.sort.updated') },
+      { value: 'updated', label: $t('package.sort.published') },
       { value: 'name-asc', label: $t('package.sort.name_asc') },
       { value: 'name-desc', label: $t('package.sort.name_desc') },
     ] as const,

app/components/Package/ListToolbar.vue

@@ -91,7 +91,7 @@ const sortKeyLabelKeys: Record<SortKey, string> = {
   'downloads-day': 'filters.sort.downloads_day',
   'downloads-month': 'filters.sort.downloads_month',
   'downloads-year': 'filters.sort.downloads_year',
-  'updated': 'filters.sort.updated',
+  'updated': 'filters.sort.published',
   'name': 'filters.sort.name',
   'quality': 'filters.sort.quality',
   'popularity': 'filters.sort.popularity',