Merge pull request #37 from SteelDynamite/mobile-iteration

mobile-iteration

.claude/settings.json

@@ -0,0 +1,37 @@
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Edit|MultiEdit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "but claude pre-tool"
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "Edit|MultiEdit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "but claude post-tool"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "but claude stop"
+          }
+        ]
+      }
+    ]
+  }
+}

apps/tauri/src/lib/components/DateTimePicker.svelte

@@ -121,7 +121,7 @@
     </div>
 
     <!-- Calendar grid -->
-    <div class="grid grid-cols-7 px-4 pb-2">
+    <div class="grid grid-cols-7 content-start px-4 pb-2" style="height: 192px;">
       {#each calendarCells as day}
         {#if day === null}
           <div></div>
@@ -183,5 +183,6 @@
         <button onclick={clear} class="text-sm text-danger hover:opacity-70">Clear date</button>
       </div>
     {/if}
+    <div style="height: max(0.75rem, var(--safe-bottom))"></div>
   </div>
 </div>

apps/tauri/src/lib/components/TaskDetailView.svelte

@@ -148,7 +148,7 @@
 </header>
 
 <!-- Content -->
-<main class="relative flex-1 overflow-y-auto px-4 pt-4">
+<main class="relative flex-1 overflow-y-auto px-4 pt-4" style="padding-bottom: max(2rem, var(--safe-bottom))">
   <!-- Kebab menu -->
   <div class="absolute right-3 top-2" bind:this={menuEl}>
     <button

apps/tauri/src/lib/screens/SetupScreen.svelte

@@ -262,12 +262,11 @@
     {/if}
   </header>
 
-  <div class="flex flex-1 items-center justify-center p-6">
+  <div class="flex flex-1 flex-col items-center justify-center p-6">
+    <h1 class="-mt-8 mb-6 text-6xl font-bold">Onyx</h1>
     <div
       class="w-full max-w-sm rounded-2xl bg-card-light p-8 shadow-lg dark:bg-card-dark"
     >
-      <h1 class="mb-1 text-2xl font-bold">Onyx</h1>
-
       {#if mode === null}
         <!-- Step 1: Choose mode -->
         <p class="mb-6 text-sm text-text-secondary-light dark:text-text-secondary-dark">

apps/tauri/src/lib/screens/TasksScreen.svelte

@@ -210,12 +210,59 @@
 
   let workspaceIds = $derived(app.config ? Object.keys(app.config.workspaces).sort((a, b) => (app.config!.workspaces[a].name).localeCompare(app.config!.workspaces[b].name)) : []);
   let translateX = $derived(showDrawer ? '0' : '-80cqi');
+
+  let _edgeSwipeStartX = 0;
+  let _edgeSwipeStartY = 0;
+  let _edgeSwipeActive = false;
+
+  function handleEdgeTouchStart(e: TouchEvent) {
+    const t = e.touches[0];
+    if (t.clientX > 20) return;
+    _edgeSwipeStartX = t.clientX;
+    _edgeSwipeStartY = t.clientY;
+    _edgeSwipeActive = true;
+  }
+
+  function handleEdgeTouchMove(e: TouchEvent) {
+    if (!_edgeSwipeActive) return;
+    const dx = e.touches[0].clientX - _edgeSwipeStartX;
+    const dy = e.touches[0].clientY - _edgeSwipeStartY;
+    // Cancel if gesture is more vertical than horizontal
+    if (Math.abs(dy) > Math.abs(dx)) { _edgeSwipeActive = false; return; }
+    // Prevent scroll interference while swiping right from edge
+    e.preventDefault();
+  }
+
+  function handleEdgeTouchEnd(e: TouchEvent) {
+    if (!_edgeSwipeActive) return;
+    _edgeSwipeActive = false;
+    const dx = e.changedTouches[0].clientX - _edgeSwipeStartX;
+    if (dx < 60) return;
+    if (taskStack.length > 0) closeDetail();
+    else if (!showDrawer) showDrawer = true;
+  }
+
+  let _viewportEl = $state<HTMLDivElement | null>(null);
+
+  // Register touchmove as non-passive so preventDefault() works
+  $effect(() => {
+    if (!_viewportEl) return;
+    _viewportEl.addEventListener('touchmove', handleEdgeTouchMove, { passive: false });
+    return () => _viewportEl!.removeEventListener('touchmove', handleEdgeTouchMove);
+  });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <!-- Viewport clip -->
-<div class="h-full w-full overflow-hidden">
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="h-full w-full overflow-hidden"
+  role="region"
+  bind:this={_viewportEl}
+  ontouchstart={handleEdgeTouchStart}
+  ontouchend={handleEdgeTouchEnd}
+>
 <!-- Sliding container: left drawer + main content -->
 <div
   class="flex h-full ease-out {resizing ? '' : 'transition-transform duration-250'}"
@@ -284,6 +331,18 @@
         {/if}
       </div>
 
+      {#if app.config?.current_workspace}
+        <button
+          onclick={() => { settingsWorkspace = app.config!.current_workspace; showSettings = true; }}
+          class="shrink-0 rounded-lg p-1.5 hover:bg-black/5 dark:hover:bg-white/10"
+          aria-label="Workspace settings"
+        >
+          <svg class="h-4 w-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      {/if}
+
     </div>
 
     <!-- List items + new list button -->
@@ -336,7 +395,7 @@
     </div>
 
     <!-- Drawer footer: sync status -->
-    <div class="shrink-0 px-4 py-2.5" style="padding-bottom: max(0.625rem, var(--safe-bottom))">
+    <div class="shrink-0 px-4 py-2.5" style="padding-bottom: max(1.25rem, var(--safe-bottom))">
       {#if app.isWebdav}
         <div class="flex items-center gap-2">
           <!-- Status dot -->
@@ -504,7 +563,7 @@
         </div>
 
         <!-- Task list -->
-        <main class="flex-1 overflow-y-auto">
+        <main class="flex-1 overflow-y-auto" style="padding-bottom: max(6rem, var(--safe-bottom))">
           {#key app.activeListId}
           {#if app.lists.length === 0}
             <div class="flex h-full flex-col items-center justify-center p-8 text-center">