Extract swipe gesture logic and improve push notification handling (#135)

Author: chriswritescode-dev

backend/src/routes/sse.ts

@@ -94,7 +94,7 @@ export function createSSERoutes() {
     if (!result.success) {
       return c.json({ success: false, error: 'Invalid request', details: result.error.issues }, 400)
     }
-    const success = sseAggregator.setClientVisibility(result.data.clientId, result.data.visible)
+    const success = sseAggregator.setClientVisibility(result.data.clientId, result.data.visible, result.data.activeSessionId ?? null)
     if (!success) {
       return c.json({ success: false, error: 'Client not found' }, 404)
     }

backend/src/services/notification.ts

@@ -191,18 +191,15 @@ export class NotificationService {
     return rows.map((r) => r.user_id);
   }
 
-  private hasActiveSSEClients(): boolean {
-    return sseAggregator.hasVisibleClients();
-  }
-
   async handleSSEEvent(
     _directory: string,
     event: SSEEvent
   ): Promise<void> {
     const config = EVENT_CONFIG[event.type];
     if (!config) return;
 
-    if (this.hasActiveSSEClients()) return;
+    const sessionId = event.properties.sessionID as string | undefined;
+    if (sessionId && sseAggregator.isSessionBeingViewed(sessionId)) return;
 
     if (!this.isConfigured()) return;
 
@@ -216,27 +213,38 @@ export class NotificationService {
       if (!notifPrefs.enabled) continue;
       if (!notifPrefs.events[config.preferencesKey]) continue;
 
-      const sessionId = event.properties.sessionID as string | undefined;
-
       let notificationUrl = "/";
-      if (sessionId && _directory) {
+      let repoName = "";
+      let repoId: number | undefined;
+
+      if (_directory) {
         const reposBasePath = getReposPath();
         const localPath = path.relative(reposBasePath, _directory);
         const repo = getRepoByLocalPath(this.db, localPath);
-        
+
         if (repo) {
-          notificationUrl = `/repos/${repo.id}/sessions/${sessionId}`;
+          repoId = repo.id;
+          repoName = path.basename(repo.localPath);
+          if (sessionId) {
+            notificationUrl = `/repos/${repo.id}/sessions/${sessionId}`;
+          } else {
+            notificationUrl = `/repos/${repo.id}`;
+          }
         }
       }
 
+      const body = config.bodyFn(event.properties);
+
       const payload: PushNotificationPayload = {
-        title: config.title,
-        body: config.bodyFn(event.properties),
+        title: repoName ? `[${repoName.toUpperCase()}] ${config.title}` : config.title,
+        body: body,
         tag: `${event.type}-${sessionId ?? "global"}`,
         data: {
           eventType: event.type,
           sessionId,
           directory: _directory,
+          repoId,
+          repoName,
           url: notificationUrl,
         },
       };

backend/src/services/sse-aggregator.ts

@@ -11,6 +11,7 @@ interface SSEClient {
   callback: SSEClientCallback
   directories: Set<string>
   visible: boolean
+  activeSessionId: string | null
 }
 
 interface DirectoryConnection {
@@ -51,7 +52,8 @@ class SSEAggregator {
       id,
       callback,
       directories: new Set(directories),
-      visible: false
+      visible: false,
+      activeSessionId: null
     }
     this.clients.set(id, client)
 
@@ -353,19 +355,22 @@ class SSEAggregator {
     return this.clients.size
   }
 
-  setClientVisibility(id: string, visible: boolean): boolean {
+  setClientVisibility(id: string, visible: boolean, activeSessionId: string | null = null): boolean {
     const client = this.clients.get(id)
     if (!client) {
       logger.warn(`setClientVisibility: client ${id} not found`)
       return false
     }
     client.visible = visible
+    client.activeSessionId = visible ? activeSessionId : null
     return true
   }
 
-  hasVisibleClients(): boolean {
+  isSessionBeingViewed(sessionId: string): boolean {
     for (const client of this.clients.values()) {
-      if (client.visible) return true
+      if (client.visible && client.activeSessionId === sessionId) {
+        return true
+      }
     }
     return false
   }

frontend/eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'src/sw.ts']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider, Outlet, useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
 import { Toaster } from 'sonner'
 import { Repos } from './pages/Repos'
 import { RepoDetail } from './pages/RepoDetail'
@@ -61,8 +62,19 @@ function PermissionDialogWrapper() {
 }
 
 function AppShell() {
+  const navigate = useNavigate()
   useTheme()
 
+  useEffect(() => {
+    const channel = new BroadcastChannel('notification-click')
+    channel.onmessage = (event: MessageEvent) => {
+      if (event.data?.url) {
+        navigate(event.data.url)
+      }
+    }
+    return () => channel.close()
+  }, [navigate])
+
   return (
     <AuthProvider>
       <EventProvider>

frontend/src/components/session/SessionCard.tsx

@@ -1,10 +1,11 @@
-import { useState, useRef } from "react";
+import { useRef, useEffect } from "react";
 import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { MiniScanner } from "@/components/ui/mini-scanner";
 import { Trash2, Clock } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import type { Session } from "@/api/types";
+import { useSwipe } from "@/hooks/useSwipe";
 
 interface SessionCardProps {
   session: Session;
@@ -25,57 +26,26 @@ export const SessionCard = ({
   onToggleSelection,
   onDelete,
 }: SessionCardProps) => {
-  const [swipeOffset, setSwipeOffset] = useState(0);
-  const [isSwipeOpen, setIsSwipeOpen] = useState(false);
-  const touchStartX = useRef<number | null>(null);
   const cardRef = useRef<HTMLDivElement>(null);
+  const { bind, swipeOffset, isOpen, isSwipingBack, close, swipeStyles } = useSwipe();
 
-  const handleTouchStart = (e: React.TouchEvent) => {
-    touchStartX.current = e.touches[0].clientX;
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (touchStartX.current === null) return;
-    
-    const currentX = e.touches[0].clientX;
-    const diff = touchStartX.current - currentX;
-    
-    if (diff > 0) {
-      const newOffset = Math.min(diff, 80);
-      setSwipeOffset(newOffset);
-    } else if (diff < 0 && isSwipeOpen) {
-      const newOffset = Math.max(0, 80 + diff);
-      setSwipeOffset(newOffset);
-    }
-  };
-
-  const handleTouchEnd = () => {
-    if (swipeOffset > 50) {
-      setIsSwipeOpen(true);
-      setSwipeOffset(80);
-    } else if (swipeOffset < 30) {
-      setIsSwipeOpen(false);
-      setSwipeOffset(0);
+  useEffect(() => {
+    if (cardRef.current) {
+      return bind(cardRef.current);
     }
-    touchStartX.current = null;
-  };
-
-  const closeSwipe = () => {
-    setSwipeOffset(0);
-    setIsSwipeOpen(false);
-  };
+  }, [bind]);
 
   const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     onDelete(e);
-    closeSwipe();
+    close();
   };
 
   return (
-    <div className="relative" onClick={closeSwipe}>
+    <div className="relative" onClick={close}>
       <div
         className={`absolute top-0.5 right-0 bottom-0.5 w-20 bg-red-600 flex items-center justify-center rounded-r-lg transition-opacity ${
-          swipeOffset > 20 || isSwipeOpen ? "opacity-100" : "opacity-0"
+          !isSwipingBack && (isOpen || swipeOffset > 40) ? "opacity-100" : "opacity-0"
         }`}
       >
         <button
@@ -85,17 +55,10 @@ export const SessionCard = ({
           <Trash2 className="w-5 h-5" />
         </button>
       </div>
-      <div
-        ref={cardRef}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-        style={{ transform: `translateX(-${swipeOffset}px)` }}
-        className="transition-transform"
-      >
+      <div ref={cardRef} style={swipeStyles}>
         <Card
           className={`p-2 cursor-pointer transition-all overflow-hidden ${
-            isSwipeOpen
+            isOpen
               ? "rounded-none"
               : "rounded-r-lg"
           } ${
@@ -106,7 +69,7 @@ export const SessionCard = ({
                 : "bg-card border-border hover:bg-accent hover:border-border"
           } hover:shadow-lg`}
           onClick={() => {
-            if (!isSwipeOpen) {
+            if (!isOpen) {
               onSelect(session.id);
             }
           }}

frontend/src/components/session/SessionList.tsx

@@ -167,8 +167,8 @@ export const SessionList = ({
         />
       </div>
 
-      <div className="flex-1 overflow-y-auto px-4 pt-4 pb-4 min-h-0 [mask-image:linear-gradient(to_bottom,transparent,black_16px,black)]">
-        <div className="flex flex-col gap-2">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden px-4 pt-4 pb-4 min-h-0 [mask-image:linear-gradient(to_bottom,transparent,black_16px,black)]">
+        <div className="flex flex-col gap-4">
           {filteredSessions.length === 0 ? (
             <div className="text-sm text-muted-foreground text-center py-4">
               No sessions found

frontend/src/hooks/useSSE.ts

@@ -43,6 +43,8 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
   const client = useOpenCodeClient(opcodeUrl, directory)
   const queryClient = useQueryClient()
   const mountedRef = useRef(true)
+  const sessionIdRef = useRef(currentSessionId)
+  sessionIdRef.current = currentSessionId
   const [isConnected, setIsConnected] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isReconnecting, setIsReconnecting] = useState(false)
@@ -363,7 +365,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
       if (connected) {
         setError(null)
         fetchInitialData()
-        sseManager.reportVisibility(document.visibilityState === 'visible')
+        sseManager.reportVisibility(document.visibilityState === 'visible', sessionIdRef.current)
       } else {
         setError('Connection lost. Reconnecting...')
       }
@@ -378,7 +380,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
     }
 
     const handleVisibilityChange = () => {
-      sseManager.reportVisibility(document.visibilityState === 'visible')
+      sseManager.reportVisibility(document.visibilityState === 'visible', sessionIdRef.current)
     }
 
     document.addEventListener('visibilitychange', handleVisibilityChange)
@@ -395,5 +397,11 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
     }
   }, [opcodeUrl, directory, handleSSEEvent, fetchInitialData])
 
+  useEffect(() => {
+    if (isConnected && document.visibilityState === 'visible') {
+      sseManager.reportVisibility(true, currentSessionId)
+    }
+  }, [currentSessionId, isConnected])
+
   return { isConnected, error, isReconnecting }
 }