From aa941ad5b25266a818a14f3fd6f713925d265e3b Mon Sep 17 00:00:00 2001
From: EmNudge <24513691+EmNudge@users.noreply.github.com>
Date: Mon, 27 Apr 2026 23:35:00 -0400
Subject: [PATCH] Refine UI: add theme switcher, command palette hint,
 scrollbar styling, and responsive aside panel

---
 dist/index.html                               |  4 +-
 src/App.vue                                   | 61 ++++++++++++++++---
 src/components/EasySearch.vue                 |  5 --
 src/components/Header.vue                     | 27 ++++++++
 src/components/ThemeSwitcher.vue              | 43 +------------
 .../table-container/InfoContainer.vue         |  3 +-
 .../info-tables/Properties.vue                |  5 +-
 src/styles/base.css                           | 29 +++++++++
 src/styles/tokens.css                         | 14 +++++
 9 files changed, 133 insertions(+), 58 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 2d8175b..14ad5b7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="manifest" href="/manifest.json" />
     <title>Unicode Lookup</title>
-    <script type="module" crossorigin src="/assets/main-Dff8Vm2P.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/main-D-Cx_0zz.css">
+    <script type="module" crossorigin src="/assets/main-tcDuWeFF.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/main-sNLOj4AU.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 87829fd..fa20abf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { hasFirstLoaded, selectedCodepoint, searchMode, results } from "$stores";
+import { hasFirstLoaded, selectedCodepoint, searchMode, results, activeIndex } from "$stores";
 import { useTheme, useGlobalKeyboard } from "$src/composables";
+import CloseIcon from "$icons/CloseIcon.vue";
 
 import GitHubIcon from "$icons/GitHubIcon.vue";
 import ResultsContainer from "$components/table-container/ResultsContainer.vue";
@@ -25,6 +26,9 @@ onMounted(() => {
   <div :class="['content', selectedCodepoint && 'middle']">
     <aside v-if="selectedCodepoint">
       <div>
+        <button class="aside-close" @click="activeIndex = -1">
+          <CloseIcon />
+        </button>
         <InfoContainer
           :codepoint="selectedCodepoint.codepoint"
           :info="selectedCodepoint"
@@ -42,8 +46,6 @@ onMounted(() => {
           <AdvancedSearch v-else />
         </div>
 
-        <br />
-
         <template v-if="hasFirstLoaded">
           <ResultsContainer v-if="results.length" />
           <template v-else>
@@ -53,7 +55,7 @@ onMounted(() => {
         <Loader v-else />
       </main>
     </div>
-    <aside v-if="selectedCodepoint" />
+    <aside v-if="selectedCodepoint" class="aside-spacer" />
   </div>
   <CommandPalette />
 </template>
@@ -80,13 +82,40 @@ main {
 }
 .content.middle {
   display: grid;
-  grid-template-columns: minmax(500px, auto) 600px 500px;
+  grid-template-columns: 400px 600px 1fr;
   justify-content: center;
 }
 @media (max-width: 1600px) {
   .content.middle {
-    display: grid;
-    grid-template-columns: minmax(500px, auto) 600px;
+    grid-template-columns: 400px 1fr;
+  }
+  .aside-spacer {
+    display: none;
+  }
+}
+@media (max-width: 1024px) {
+  .content.middle {
+    grid-template-columns: 1fr;
+  }
+  .content.middle aside:not(.aside-spacer) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: var(--z-modal-backdrop);
+    background: var(--color-bg);
+    overflow-y: auto;
+  }
+  .content.middle aside:not(.aside-spacer) div {
+    position: static;
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+  .aside-spacer {
+    display: none;
   }
 }
 aside div {
@@ -95,6 +124,24 @@ aside div {
   overflow-y: auto;
   height: 100vh;
 }
+.aside-close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  z-index: 1;
+  background: none;
+  border: none;
+  padding: var(--space-2);
+  opacity: 0.4;
+  cursor: pointer;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+.aside-close:hover {
+  opacity: 0.8;
+}
+.searchbox {
+  margin-bottom: var(--space-5);
+}
 .no-results {
   color: var(--color-text-tertiary);
   font-weight: 300;
diff --git a/src/components/EasySearch.vue b/src/components/EasySearch.vue
index 137e2cb..f02f618 100644
--- a/src/components/EasySearch.vue
+++ b/src/components/EasySearch.vue
@@ -52,11 +52,6 @@ function handleKeyDown(e: KeyboardEvent) {
   if (e.key.length > 1 || /\p{C}/u.test(e.key)) return;
   if (e.ctrlKey || e.altKey || e.metaKey) return;
 
-  if (e.key === " ") {
-    e.preventDefault();
-    return;
-  }
-
   input?.focus();
 }
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index ca61ed4..f83b395 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { searchMode } from "$stores";
+import { openCommandPalette } from "$stores/commandPalette";
 import FilterIcon from "$icons/FilterIcon.vue";
+import ThemeSwitcher from "./ThemeSwitcher.vue";
 
 function toggleSearchMode() {
   searchMode.value = searchMode.value === "advanced" ? "simple" : "advanced";
@@ -16,6 +18,10 @@ function toggleSearchMode() {
     </div>
 
     <div class="buttons">
+      <button class="cmd-k-hint" @click="openCommandPalette">
+        <kbd>⌘K</kbd>
+      </button>
+      <ThemeSwitcher />
       <button :class="['styled', searchMode === 'advanced' && 'active']" @click="toggleSearchMode">
         <FilterIcon :active="searchMode === 'advanced'" />
       </button>
@@ -49,6 +55,8 @@ h3 {
 }
 .buttons {
   display: flex;
+  align-items: center;
+  gap: var(--space-1);
 }
 button {
   cursor: pointer;
@@ -56,6 +64,25 @@ button {
   z-index: 2;
   padding: var(--space-2) var(--space-4);
 }
+.cmd-k-hint {
+  background: none;
+  border: none;
+  padding: var(--space-1) var(--space-2);
+  opacity: 0.35;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+.cmd-k-hint:hover {
+  opacity: 0.7;
+}
+.cmd-k-hint kbd {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  background: var(--color-bg-offset);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 2px var(--space-2);
+}
 .active {
   color: var(--hsl-bg);
   background: var(--hsl);
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
index 2789b29..db4d6e3 100644
--- a/src/components/ThemeSwitcher.vue
+++ b/src/components/ThemeSwitcher.vue
@@ -1,47 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
 import SunIcon from "$icons/SunIcon.vue";
+import { useTheme } from "$src/composables/useTheme";
 
-const isDarkTheme = ref(false);
-
-const updateTheme = (darkTheme: boolean) => {
-  const newTheme = darkTheme ? "dark" : "light";
-  document.documentElement.dataset.theme = newTheme;
-  localStorage.setItem("color-scheme", newTheme);
-};
-
-const getColorSchemeLS = () => localStorage.getItem("color-scheme") as "dark" | "light" | null;
-
-let colorSchemeMedia: MediaQueryList | null = null;
-const onColorSchemeChange = (e: MediaQueryListEvent) => {
-  if (getColorSchemeLS()) return;
-  isDarkTheme.value = e.matches;
-};
-
-onMounted(() => {
-  colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
-  colorSchemeMedia.addEventListener("change", onColorSchemeChange);
-
-  const colorSchemeLS = getColorSchemeLS();
-  if (colorSchemeLS) {
-    isDarkTheme.value = colorSchemeLS === "dark";
-  } else {
-    const isSystemDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    isDarkTheme.value = isSystemDarkTheme;
-  }
-
-  updateTheme(isDarkTheme.value);
-});
-
-onUnmounted(() => {
-  colorSchemeMedia?.removeEventListener("change", onColorSchemeChange);
-});
-
-const toggleTheme = () => {
-  const newValue = !isDarkTheme.value;
-  isDarkTheme.value = newValue;
-  updateTheme(newValue);
-};
+const { toggleTheme } = useTheme();
 </script>
 
 <template>
diff --git a/src/components/table-container/InfoContainer.vue b/src/components/table-container/InfoContainer.vue
index ba6ba96..0160409 100644
--- a/src/components/table-container/InfoContainer.vue
+++ b/src/components/table-container/InfoContainer.vue
@@ -96,7 +96,6 @@ const htmlEntityNames = computed(() => symbolHtmlNamesMap.value.get(props.codepo
     />
     <Encoding :codepoint="props.codepoint" />
 
-    <br />
     <Properties :properties="properties" />
   </div>
 </template>
@@ -104,7 +103,7 @@ const htmlEntityNames = computed(() => symbolHtmlNamesMap.value.get(props.codepo
 <style scoped>
 div.container {
   border-radius: 0;
-  padding: var(--space-6) var(--space-5);
+  padding: var(--space-6) var(--space-5) var(--space-16);
 }
 .basic-info {
   display: grid;
diff --git a/src/components/table-container/info-tables/Properties.vue b/src/components/table-container/info-tables/Properties.vue
index 06ca358..2e1de2b 100644
--- a/src/components/table-container/info-tables/Properties.vue
+++ b/src/components/table-container/info-tables/Properties.vue
@@ -7,7 +7,7 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <div>
+  <div class="properties-section">
     <h3>Properties</h3>
     <div class="properties">
       <span v-for="property in props.properties" :key="property">{{ property }}</span>
@@ -16,6 +16,9 @@ const props = defineProps<Props>();
 </template>
 
 <style scoped>
+.properties-section {
+  margin-top: var(--space-4);
+}
 h3 {
   padding-bottom: var(--space-3);
   color: var(--color-text-primary);
diff --git a/src/styles/base.css b/src/styles/base.css
index 8426068..11e885a 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -108,6 +108,35 @@ button:focus-visible {
     0 0 0 4px var(--color-border-focus);
 }
 
+/* ==========================================
+   SCROLLBARS
+   ========================================== */
+
+/* Modern browsers (Firefox, Chrome 121+) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+}
+
+/* WebKit (Safari, older Chrome) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar-thumb);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-scrollbar-thumb-hover);
+}
+
 /* ==========================================
    UTILITY CLASSES
    ========================================== */
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index bf04e88..9f1eef2 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -69,6 +69,11 @@
   /* Active/Selected State */
   --color-bg-active: rgba(128, 128, 128, 0.1);
 
+  /* Scrollbar */
+  --color-scrollbar-thumb: rgba(75, 85, 140, 0.25);
+  --color-scrollbar-thumb-hover: rgba(75, 85, 140, 0.4);
+  --color-scrollbar-track: transparent;
+
   /* Shadow Colors */
   --color-shadow: rgba(0, 0, 0, 0.09);
   --color-shadow-elevated: rgba(0, 0, 0, 0.12);
@@ -270,6 +275,11 @@
   --color-backdrop: rgba(0, 0, 0, 0.7);
   --color-bg-active: rgba(128, 128, 128, 0.15);
 
+  /* Scrollbar */
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
+  --color-scrollbar-track: transparent;
+
   /* Adjusted state colors for dark mode */
   --color-success: hsl(140, 50%, 55%);
   --color-success-bg: hsl(140, 40%, 20%);
@@ -319,6 +329,10 @@
     --color-backdrop: rgba(0, 0, 0, 0.7);
     --color-bg-active: rgba(128, 128, 128, 0.15);
 
+    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
+    --color-scrollbar-track: transparent;
+
     --color-success: hsl(140, 50%, 55%);
     --color-success-bg: hsl(140, 40%, 20%);
     --color-success-border: hsl(140, 50%, 50%);
