design experiments

package.json

@@ -11,6 +11,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@catppuccin/palette": "^1.0.3",
     "@tauri-apps/api": "^2.0.0-beta.0",
     "@tauri-apps/plugin-shell": "^2.0.0-beta.0",
     "modern-normalize": "^2.0.0"
@@ -25,4 +26,4 @@
     "typescript": "^5.0.2",
     "vite": "^5.0.0"
   }
-}
+}

src/App.svelte

@@ -6,6 +6,7 @@
   import type { RevDetail } from "./messages/RevDetail.js";
   import type { RevId } from "./messages/RevId.js";
   import Bound from "./Bound.svelte";
+  import IdSpan from "./IdSpan.svelte";
 
   let log_content = init<RevHeader[]>();
   let change_content = init<RevDetail>();
@@ -35,17 +36,17 @@
 </script>
 
 <div id="shell">
-  <div id="log">
+  <div id="log" class="pane">
     <Bound ipc={log_content} let:value>
       {#each value as change}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div class="change" on:click={() => load_change(change.change_id)}>
           <code class="change-line">
-            <span><b>{change.change_id.prefix}</b>{change.change_id.rest}</span>
-            {change.email}
-            {change.timestamp}
-            <span><b>{change.commit_id.prefix}</b>{change.commit_id.rest}</span>
+            <IdSpan id={change.change_id} type="change" />
+            <span class="author">{change.email}</span>
+            <span class="timestamp">{change.timestamp}</span>
+            <IdSpan id={change.commit_id} type="commit" />
           </code>
           <span class="change-line">
             {change.description.lines[0]}
@@ -54,8 +55,10 @@
       {/each}
     </Bound>
   </div>
-  <div id="selected-change">
+
+  <div id="selected-change" class="pane">
     <Bound ipc={change_content} let:value>
+      <textarea>foo bar</textarea>
       {#each value.header.description.lines as line}
         <div>{line}</div>
       {/each}
@@ -64,30 +67,67 @@
       {/each}
     </Bound>
   </div>
+
+  <div id="status-bar">
+    <span>C:\Users\user\repository</span>
+    <button>Undo!</button>
+  </div>
 </div>
 
 <style>
   #shell {
     width: 100vw;
     height: 100vh;
+
     display: grid;
     grid-template-columns: 1fr 1fr;
-    column-gap: 10px;
+    grid-template-rows: 1fr 2em;
+    gap: 10px;
+
+    background: var(--ctp-base);
+    color: var(--ctp-text);
   }
 
   #log {
-    border-right: 1px solid black;
     overflow-x: hidden;
     overflow-y: scroll;
+    scrollbar-color: var(--ctp-text) var(--ctp-mantle);
+    border-width: 1px 1px 1px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
   }
 
-  #log > div:nth-child(even) {
-    background: white;
-    color: black;
+  #selected-change {
+    border-width: 1px 0 1px 1px;
   }
 
-  #selected-change {
-    border-left: 1px solid black;
+  #status-bar {
+    grid-column: 1/3;
+    background: var(--ctp-crust);
+    border-top: 1px solid var(--ctp-overlay0);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+  }
+
+  #status-bar > button {
+    background: var(--ctp-peach);
+    border-width: 1px;
+    border-radius: 2px;
+    border-color: var(--ctp-overlay0);
+    &:active,
+    &:hover {
+      border-color: var(--ctp-lavender);
+    }
+  }
+
+  .pane {
+    background: var(--ctp-mantle);
+    border: solid var(--ctp-overlay0);
+    margin-top: 10px;
+    padding: 5px;
   }
 
   .change {
@@ -100,4 +140,28 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .author {
+    color: var(--ctp-yellow);
+    display: inline-block;
+    width: 24ch;
+  }
+
+  .timestamp {
+    color: var(--ctp-teal);
+  }
+
+  textarea {
+    width: 100%;
+    caret-color: var(--ctp-rosewater);
+    outline: none;
+    border-color: var(--ctp-overlay0);
+    &:focus-visible {
+      border-color: var(--ctp-lavender);
+    }
+  }
+
+  ::selection {
+    background: var(--ctp-rosewater);
+  }
 </style>

src/IdSpan.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { RevId } from "./messages/RevId";
+
+    export let id: RevId;
+    export let type: "change" | "commit";
+</script>
+
+<span class="id"><span class={type}>{id.prefix}</span>{id.rest}</span>
+
+<style>
+    .id {
+        color: var(--ctp-overlay1);
+    }
+    .change {
+        color: var(--ctp-pink);
+    }
+    .commit {
+        color: var(--ctp-mauve);
+    }
+</style>

src/global.css

@@ -0,0 +1,69 @@
+@import "modern-normalize";
+@import "@catppuccin/palette/css/catppuccin.css";
+
+:root {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  /* catppuccin latte */
+  --ctp-crust: var(--ctp-latte-crust);
+  --ctp-mantle: var(--ctp-latte-mantle);
+  --ctp-base: var(--ctp-latte-base);
+  --ctp-surface0: var(--ctp-latte-surface0);
+  --ctp-surface1: var(--ctp-latte-surface1);
+  --ctp-surface2: var(--ctp-latte-surface2);
+  --ctp-overlay0: var(--ctp-latte-overlay0);
+  --ctp-overlay1: var(--ctp-latte-overlay1);
+  --ctp-overlay2: var(--ctp-latte-overlay2);
+  --ctp-subtext0: var(--ctp-latte-subtext0);
+  --ctp-subtext1: var(--ctp-latte-subtext1);
+  --ctp-text: var(--ctp-latte-text);
+  --ctp-lavender: var(--ctp-latte-lavender);
+  --ctp-blue: var(--ctp-latte-blue);
+  --ctp-sapphire: var(--ctp-latte-sapphire);
+  --ctp-sky: var(--ctp-latte-sky);
+  --ctp-teal: var(--ctp-latte-teal);
+  --ctp-green: var(--ctp-latte-green);
+  --ctp-yellow: var(--ctp-latte-yellow);
+  --ctp-peach: var(--ctp-latte-peach);
+  --ctp-maroon: var(--ctp-latte-maroon);
+  --ctp-red: var(--ctp-latte-red);
+  --ctp-mauve: var(--ctp-latte-mauve);
+  --ctp-pink: var(--ctp-latte-pink);
+  --ctp-flamingo: var(--ctp-latte-flamingo);
+  --ctp-rosewater: var(--ctp-latte-rosewater);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ctp-crust: var(--ctp-macchiato-crust);
+    --ctp-mantle: var(--ctp-macchiato-mantle);
+    --ctp-base: var(--ctp-macchiato-base);
+    --ctp-surface0: var(--ctp-macchiato-surface0);
+    --ctp-surface1: var(--ctp-macchiato-surface1);
+    --ctp-surface2: var(--ctp-macchiato-surface2);
+    --ctp-overlay0: var(--ctp-macchiato-overlay0);
+    --ctp-overlay1: var(--ctp-macchiato-overlay1);
+    --ctp-overlay2: var(--ctp-macchiato-overlay2);
+    --ctp-subtext0: var(--ctp-macchiato-subtext0);
+    --ctp-subtext1: var(--ctp-macchiato-subtext1);
+    --ctp-text: var(--ctp-macchiato-text);
+    --ctp-lavender: var(--ctp-macchiato-lavender);
+    --ctp-blue: var(--ctp-macchiato-blue);
+    --ctp-sapphire: var(--ctp-macchiato-sapphire);
+    --ctp-sky: var(--ctp-macchiato-sky);
+    --ctp-teal: var(--ctp-macchiato-teal);
+    --ctp-green: var(--ctp-macchiato-green);
+    --ctp-yellow: var(--ctp-macchiato-yellow);
+    --ctp-peach: var(--ctp-macchiato-peach);
+    --ctp-maroon: var(--ctp-macchiato-maroon);
+    --ctp-red: var(--ctp-macchiato-red);
+    --ctp-mauve: var(--ctp-macchiato-mauve);
+    --ctp-pink: var(--ctp-macchiato-pink);
+    --ctp-flamingo: var(--ctp-macchiato-flamingo);
+    --ctp-rosewater: var(--ctp-macchiato-rosewater);
+  }
+}

src/main.ts

@@ -1,5 +1,4 @@
-import "modern-normalize";
-import "./styles.css";
+import "./global.css";
 import App from "./App.svelte";
 
 const app = new App({