palmier 0.8.0 → 0.8.3

package/palmier-server/pwa/src/App.css

@@ -736,6 +736,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding-bottom: calc(56px + var(--space-lg) * 2 + env(safe-area-inset-bottom, 0px));
 }
 
 /* ===== Task Card ===== */
@@ -1792,25 +1793,16 @@ body {
   z-index: 101;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   animation: drawerSlideIn 0.25s ease;
 }
 
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.drawer-title {
-  font-size: 1.125rem;
-  font-weight: 800;
-  color: var(--color-primary);
-  letter-spacing: -0.04em;
-}
-
 .drawer-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1846,6 +1838,18 @@ body {
   margin-bottom: var(--space-sm);
 }
 
+.drawer-toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.drawer-toggle-group-divided {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
 .drawer-toggle {
   display: flex;
   align-items: center;
@@ -1960,17 +1964,42 @@ body {
 
 /* ===== Tab bar ===== */
 
-.tab-bar {
-  display: flex;
-  align-items: center;
-  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-  border-bottom: 1px solid var(--color-border);
+.app-header {
   position: sticky;
   top: 0;
   z-index: 10;
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  border-bottom: 1px solid var(--color-border);
   backdrop-filter: blur(8px);
 }
 
+.app-title-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.app-title-bar .hamburger-btn {
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.app-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+}
+
 .tab-btn {
   flex: 1;
   display: flex;
@@ -2612,6 +2641,7 @@ body {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  overscroll-behavior: contain;
   animation: none;
 }
 
@@ -2624,4 +2654,124 @@ body {
   .dashboard-main {
     padding: var(--space-lg);
   }
+
+  .fab {
+    right: max(var(--space-lg), calc((100vw - 1080px) / 2));
+  }
+}
+
+/* ===== Swipe-to-delete row ===== */
+
+.swipe-row {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;   /* let vertical scroll through; capture horizontal ourselves */
+}
+
+.swipe-row-action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-error, #dc2626);
+  color: #fff;
+  border: none;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+
+.swipe-row-action:focus-visible {
+  outline: 2px solid var(--color-accent, #2E5CE5);
+  outline-offset: -4px;
+}
+
+.swipe-row-content {
+  position: relative;
+  background: var(--color-surface);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+/* During an active drag, skip the transition so the row tracks the finger 1:1.
+   On release the class is removed and the snap animates. */
+.swipe-row-content-dragging {
+  transition: none;
+}
+
+.app-filter-help {
+  margin-top: var(--space-xs);
+}
+
+.app-combobox {
+  position: relative;
+}
+
+.app-combobox-list {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  list-style: none;
+  margin: 0;
+  padding: var(--space-xs) 0;
+  z-index: 20;
+}
+
+.app-combobox-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 8px var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.app-combobox-row:hover {
+  background: var(--color-hover, rgba(0, 0, 0, 0.04));
+}
+
+.app-combobox-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.app-combobox-icon-placeholder {
+  background: var(--color-border);
+}
+
+.app-combobox-labels {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.app-combobox-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-combobox-pkg {
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

package/palmier-server/pwa/src/App.tsx

@@ -1,13 +1,27 @@
-import { Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import { HostStoreProvider } from "./contexts/HostStoreContext";
 import { HostConnectionProvider } from "./contexts/HostConnectionContext";
+import { Device } from "./native/Device";
 import Dashboard from "./pages/Dashboard";
 import PairHost from "./pages/PairHost";
 
+/** Routes FCM notification taps (fired by DevicePlugin) into the client-side router. */
+function DeepLinkRouter() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!Device) return;
+    const handle = Device.addListener("deepLink", ({ path }) => navigate(path));
+    return () => { handle.then((h) => h.remove()); };
+  }, [navigate]);
+  return null;
+}
+
 export default function App() {
   return (
     <HostStoreProvider>
       <HostConnectionProvider>
+        <DeepLinkRouter />
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/tasks" element={<Dashboard />} />