feat: add bottom bar

src/plugins/built-in/globalSearch/SearchBar.svelte

@@ -266,11 +266,46 @@
             {/if}
           </div>
         {/if}
+        <div class="p-3 w-full border-t border-zinc-900/5 dark:border-zinc-100/5">
+          {#if combinedResults.length > 0 || calculatorResult}
+            <div class="flex justify-between items-center text-sm text-zinc-500 dark:text-zinc-400">
+              <div class="flex gap-4 items-center">
+                {#if !calculatorResult}
+                  {#if selectedIndex >= 0 && selectedIndex < combinedResults.length}
+                    {@const item = combinedResults[selectedIndex].item}
+                    {#if 'keybind' in item && item.keybind}
+                      {@render Shortcut({ text: 'Shortcut', keybind: item.keybindLabel })}
+                    {/if}
+                  {/if}
+                {/if}
+              </div>
+              <div class="flex gap-4 items-center">
+                {@render Shortcut({ text: 'Navigate', keybind: ['↑', '↓']})}
+                {#if calculatorResult && selectedIndex === 0}
+                  {@render Shortcut({ text: 'Copy result', keybind: ['↵']})}
+                {:else}
+                  {@render Shortcut({ text: 'Select', keybind: ['↵']})}
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
       </div>
     </div>
   </div>
 {/if}
 
+{#snippet Shortcut({ text, keybind }: { text: string, keybind: string[] }) }
+  <div class="flex gap-2 items-center">
+    <div class="flex gap-1 items-center">
+      {#each keybind as key}
+        <kbd class="px-1 py-0.5 text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-800">{key}</kbd>
+      {/each}
+    </div>
+    <span>{text}</span>
+  </div>
+{/snippet}
+
 <style>
   :global(.highlight) {
     background-color: rgba(200, 200, 200, 0.3);

src/plugins/built-in/globalSearch/commands.ts

@@ -1,3 +1,4 @@
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 import { loadHomePage } from '@/seqta/utils/Loaders/LoadHomePage';
 
 export interface BaseCommandItem {
@@ -12,17 +13,17 @@ export interface BaseCommandItem {
 
 export interface StaticCommandItem extends BaseCommandItem {
   keybind?: string[];
-  keybindLabel?: string;
+  keybindLabel?: string[];
 }
 
 const staticCommands: StaticCommandItem[] = [
   {
     id: 'home',
-    icon: '\uea83', 
+    icon: '\ueb4c', 
     category: 'navigation',
     text: 'Home',
     keybind: ['alt+h'],
-    keybindLabel: 'Alt+H',
+    keybindLabel: ['Alt', 'H'],
     action: () => {
       window.location.hash = '?page=/home';
       loadHomePage();
@@ -31,11 +32,11 @@ const staticCommands: StaticCommandItem[] = [
   },
   {
     id: 'messages',
-    icon: '\uea6e', 
+    icon: '\uebfd', 
     category: 'navigation',
-    text: 'Messages 4',
+    text: 'Direct Messages',
     keybind: ['alt+m'],
-    keybindLabel: 'Alt+M',
+    keybindLabel: ['Alt', 'M'],
     action: () => {
       window.location.hash = '?page=/messages';
     },
@@ -43,11 +44,11 @@ const staticCommands: StaticCommandItem[] = [
   },
   {
     id: 'timetable',
-    icon: '\uecce', 
+    icon: '\ue9cd', 
     category: 'navigation',
     text: 'Timetable',
     keybind: ['alt+t'],
-    keybindLabel: 'Alt+T',
+    keybindLabel: ['Alt', 'T'],
     action: () => {
       window.location.hash = '?page=/timetable';
     },
@@ -55,11 +56,11 @@ const staticCommands: StaticCommandItem[] = [
   },
   {
     id: 'assessments',
-    icon: '\uebb3', 
+    icon: '\ueac3', 
     category: 'navigation',
     text: 'Assessments',
     keybind: ['alt+a'],
-    keybindLabel: 'Alt+A',
+    keybindLabel: ['Alt', 'A'],
     action: () => {
       window.location.hash = '?page=/assessments';
     },
@@ -67,10 +68,10 @@ const staticCommands: StaticCommandItem[] = [
   },
   {
     id: 'toggle-dark-mode',
-    icon: '\ueaa9',
+    icon: '\uecfe',
     category: 'action',
     text: 'Toggle Dark Mode',
-    action: () => console.log('Toggle Dark Mode'),
+    action: () => settingsState.DarkMode = !settingsState.DarkMode,
     priority: 5,
     keywords: ['theme', 'appearance']
   }