@hienlh/ppm 0.5.0 → 0.5.1

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -34,7 +34,8 @@ function ProjectAvatar({ name, color, allNames }: { name: string; color: string;
 }
 
 export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps) {
-  const { projects, activeProject, setActiveProject, setProjectColor, moveProject, renameProject, deleteProject, customOrder } = useProjectStore();
+  const { projects, activeProject, setActiveProject, setProjectColor, reorderProjects, renameProject, deleteProject, customOrder } = useProjectStore();
+
   const openTab = useTabStore((s) => s.openTab);
   const version = useSettingsStore((s) => s.version);
 
@@ -77,10 +78,16 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
   }
 
   function handleSettings() {
+    handleClose();
+    // Mobile: open drawer with settings tab
+    if (window.innerWidth < 768) {
+      window.dispatchEvent(new Event("open-mobile-settings"));
+      return;
+    }
+    // Desktop: open sidebar settings tab
     const { sidebarCollapsed, toggleSidebar, setSidebarActiveTab } = useSettingsStore.getState();
     if (sidebarCollapsed) toggleSidebar();
     setSidebarActiveTab("settings");
-    handleClose();
   }
 
   async function handleRename() {
@@ -133,16 +140,22 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
     ...(actionIdx > 0 ? [{
       label: "Move Up",
       icon: ChevronUp,
-      onClick: async () => {
-        await moveProject(actionTarget, "up");
+      onClick: () => {
+        const names = ordered.map((p) => p.name);
+        const [moved] = names.splice(actionIdx, 1);
+        names.splice(actionIdx - 1, 0, moved!);
+        reorderProjects(names);
         setActionTarget(null);
       },
     }] : []),
     ...(actionIdx < ordered.length - 1 ? [{
       label: "Move Down",
       icon: ChevronDown,
-      onClick: async () => {
-        await moveProject(actionTarget, "down");
+      onClick: () => {
+        const names = ordered.map((p) => p.name);
+        const [moved] = names.splice(actionIdx, 1);
+        names.splice(actionIdx + 1, 0, moved!);
+        reorderProjects(names);
         setActionTarget(null);
       },
     }] : []),

package/src/web/components/layout/sidebar.tsx

@@ -96,7 +96,7 @@ export function Sidebar() {
               )}
             >
               <Icon className="size-3.5" />
-              <span>{tab.label}</span>
+              {sidebarWidth >= 240 && <span>{tab.label}</span>}
             </button>
           );
         })}

package/src/web/components/settings/settings-tab.tsx

@@ -18,7 +18,7 @@ const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
 
 export function SettingsTab() {
   const { theme, setTheme } = useSettingsStore();
-  const { permission, isSubscribed, loading, subscribe, unsubscribe } = usePushNotification();
+  const { permission, isSubscribed, loading, error: pushError, subscribe, unsubscribe } = usePushNotification();
 
   return (
     <div className="h-full w-full overflow-auto">
@@ -78,6 +78,21 @@ export function SettingsTab() {
                 {loading ? "..." : isSubscribed ? "On" : "Off"}
               </Button>
             </div>
+            {isSubscribed && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs w-full"
+                onClick={() => {
+                  new Notification("PPM Test", { body: "Push notifications are working!" });
+                }}
+              >
+                Test notification
+              </Button>
+            )}
+            {pushError && (
+              <p className="text-[11px] text-destructive">{pushError}</p>
+            )}
             {permission === "denied" && (
               <p className="text-[11px] text-destructive">
                 Notifications blocked. Enable in browser settings.

package/src/web/hooks/use-push-notification.ts

@@ -13,6 +13,7 @@ export function usePushNotification() {
   const [permission, setPermission] = useState<NotificationPermission>("default");
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   // Check current permission and subscription state on mount
   useEffect(() => {
@@ -24,13 +25,29 @@ export function usePushNotification() {
 
   const subscribe = useCallback(async () => {
     setLoading(true);
+    setError(null);
     try {
       // 1. Request notification permission
       const perm = await Notification.requestPermission();
       setPermission(perm);
-      if (perm !== "granted") return;
+      if (perm !== "granted") {
+        setError("Permission denied");
+        return;
+      }
+
+      // 2. Check service worker is available (with timeout)
+      if (!navigator.serviceWorker?.controller && !navigator.serviceWorker?.ready) {
+        setError("Service worker not available (dev mode?)");
+        return;
+      }
 
-      // 2. Get VAPID public key from server
+      const swReady = await Promise.race([
+        navigator.serviceWorker.ready,
+        new Promise<null>((_, reject) => setTimeout(() => reject(new Error("Service worker timeout")), 5000)),
+      ]);
+      if (!swReady) throw new Error("Service worker not ready");
+
+      // 3. Get VAPID public key from server
       const headers: Record<string, string> = {};
       const token = getAuthToken();
       if (token) headers.Authorization = `Bearer ${token}`;
@@ -39,14 +56,13 @@ export function usePushNotification() {
       const json = await res.json();
       if (!json.ok) throw new Error(json.error || "Failed to get VAPID key");
 
-      // 3. Subscribe via PushManager
-      const reg = await navigator.serviceWorker.ready;
-      const sub = await reg.pushManager.subscribe({
+      // 4. Subscribe via PushManager
+      const sub = await swReady.pushManager.subscribe({
         userVisibleOnly: true,
         applicationServerKey: urlBase64ToUint8Array(json.data.publicKey).buffer as ArrayBuffer,
       });
 
-      // 4. Send subscription to server
+      // 5. Send subscription to server
       await fetch("/api/push/subscribe", {
         method: "POST",
         headers: { ...headers, "Content-Type": "application/json" },
@@ -56,6 +72,8 @@ export function usePushNotification() {
       setIsSubscribed(true);
       localStorage.setItem("ppm-push-subscribed", "true");
     } catch (err) {
+      const msg = err instanceof Error ? err.message : "Subscribe failed";
+      setError(msg);
       console.error("[push] Subscribe failed:", err);
     } finally {
       setLoading(false);
@@ -92,5 +110,5 @@ export function usePushNotification() {
     }
   }, []);
 
-  return { permission, isSubscribed, loading, subscribe, unsubscribe };
+  return { permission, isSubscribed, loading, error, subscribe, unsubscribe };
 }

package/src/web/stores/project-store.ts

@@ -92,6 +92,7 @@ interface ProjectStore {
   addProject: (path: string, name?: string) => Promise<ProjectInfo>;
   setProjectColor: (name: string, color: string | null) => Promise<void>;
   moveProject: (name: string, direction: "up" | "down") => Promise<void>;
+  reorderProjects: (newOrder: string[]) => Promise<void>;
   renameProject: (name: string, newName: string) => Promise<void>;
   deleteProject: (name: string) => Promise<void>;
 }
@@ -161,6 +162,12 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     set({ customOrder: newOrder });
   },
 
+  reorderProjects: async (newOrder) => {
+    saveCustomOrder(newOrder);
+    set({ customOrder: newOrder });
+    await api.patch("/api/projects/reorder", { order: newOrder }).catch(() => {});
+  },
+
   renameProject: async (name, newName) => {
     await api.patch(`/api/projects/${encodeURIComponent(name)}`, { name: newName });
     // Refetch to get updated list