ui: settings button/route

src/lib/ToolBar.svelte

@@ -6,7 +6,8 @@
     forward: '/icons/rightarrow.png',
     play: '/icons/speaker.png',
     search: '/icons/internet.png',
-    globe: '/icons/github-white.svg'
+    globe: '/icons/github-white.svg',
+    computer: '/icons/computer.png',
   };
 
   let history: string[] = $state([]);
@@ -72,6 +73,11 @@
     <img src={icons.search} alt="Search" />
     <span>Search</span>
   </button>
+  
+  <a href="/settings" class="toolbar-button" title="Settings">
+    <img src={icons.computer} alt="Settings" />
+    <span>Settings</span>
+  </a>
 
   <div class="toolbar-separator"></div>
 
@@ -105,6 +111,7 @@
     cursor: pointer;
     color: light-dark(#222, #ddd);
     text-shadow: none;
+    text-decoration: none;
   }
 
   .toolbar-button:hover {

src/routes/settings/+page.svelte

@@ -0,0 +1,17 @@
+<div>
+  <h2>Settings</h2>
+  <section class="library-content">
+    <div class="field-row-stacked">
+    </div>
+  </section>
+</div>
+
+<style>
+  h2 {
+    margin-top: 0;
+  }
+
+  .library-content {
+    margin-top: 20px;
+  }
+</style>