task bucket fixes and task creation clarity

.gitea/workflows/ci.yml

@@ -64,6 +64,13 @@ jobs:
           ls -la
           test -d dist || (echo "Missing dist/ (Vite output). Check Build step." && exit 1)
 
+      - name: Prepare deploy artifact
+        run: |
+          rm -rf deploy
+          mkdir -p deploy
+          cp -r dist package.json deploy/
+          (test -f bun.lock && cp bun.lock deploy/) || (test -f bun.lockb && cp bun.lockb deploy/) || true
+
       - name: Setup SSH known hosts
         run: |
           mkdir -p ~/.ssh
@@ -75,7 +82,7 @@ jobs:
         run: |
           sshpass -p "$SSH_PASSWORD" rsync -avz --delete \
             -e "ssh -o StrictHostKeyChecking=accept-new -p ${{ secrets.DEPLOY_SSH_PORT || '22' }}" \
-            dist/ \
+            deploy/ \
             ${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST || env.DEPLOY_HOST }}:${{ secrets.DEPLOY_PATH || env.DEPLOY_PATH }}/
 
       - name: Restart app on server
@@ -84,4 +91,4 @@ jobs:
         run: |
           sshpass -p "$SSH_PASSWORD" ssh -o StrictHostKeyChecking=accept-new -p ${{ secrets.DEPLOY_SSH_PORT || '22' }} \
             ${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST || env.DEPLOY_HOST }} \
-            'bash -lc "cd ${{ secrets.DEPLOY_PATH || env.DEPLOY_PATH }} && export PORT=${{ env.APP_PORT }} && (pm2 restart tasgrid 2>/dev/null || pm2 start \"bun run serve\" --name tasgrid --update-env)"'
+            'bash -lc "cd ${{ secrets.DEPLOY_PATH || env.DEPLOY_PATH }} && bun install --frozen-lockfile && export PORT=${{ env.APP_PORT }} && (pm2 restart tasgrid 2>/dev/null || pm2 start \"bun run serve\" --name tasgrid --update-env)"'

bun.lock

@@ -8,6 +8,7 @@
         "@formkit/auto-animate": "^0.9.0",
         "@kobalte/core": "^0.13.11",
         "@tailwindcss/vite": "^4.1.18",
+        "@thisbeyond/solid-dnd": "^0.7.5",
         "@tiptap/core": "^3.18.0",
         "@tiptap/extension-bubble-menu": "^3.20.0",
         "@tiptap/extension-dropcursor": "^3.20.0",
@@ -31,6 +32,7 @@
         "autoprefixer": "^10.4.23",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "heic2any": "^0.0.4",
         "lucide-solid": "^0.563.0",
         "pm2": "^6.0.14",
         "pocketbase": "^0.26.8",
@@ -460,6 +462,8 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
 
+    "@thisbeyond/solid-dnd": ["@thisbeyond/solid-dnd@0.7.5", "", { "peerDependencies": { "solid-js": "^1.5" } }, "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw=="],
+
     "@tiptap/core": ["@tiptap/core@3.18.0", "", { "peerDependencies": { "@tiptap/pm": "^3.18.0" } }, "sha512-Gczd4GbK1DNgy/QUPElMVozoa0GW9mW8E31VIi7Q4a9PHHz8PcrxPmuWwtJ2q0PF8MWpOSLuBXoQTWaXZRPRnQ=="],
 
     "@tiptap/extension-blockquote": ["@tiptap/extension-blockquote@3.18.0", "", { "peerDependencies": { "@tiptap/core": "^3.18.0" } }, "sha512-1HjEoM5vZDfFnq2OodNpW13s56a9pbl7jolUv1V9FrE3X5s7n0HCfDzIVpT7z1HgTdPtlN5oSt5uVyBwuwSUfA=="],
@@ -822,6 +826,8 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "heic2any": ["heic2any@0.0.4", "", {}, "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA=="],
+
     "html-entities": ["html-entities@2.3.3", "", {}, "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="],
 
     "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],

check_schema.ts

@@ -0,0 +1,15 @@
+import PocketBase from 'pocketbase';
+
+const pb = new PocketBase('https://pocketbase.ccllc.pro');
+
+async function check() {
+    try {
+        await pb.admins.authWithPassword("timothy@ccllc.pro", 'pass');
+        const res = await pb.collection('Job_Info_Prod').getList(1, 1);
+        console.log("Got item:", res.items[0]);
+    } catch (e) {
+        console.error("Auth / Fetch Error", e);
+    }
+}
+
+check();

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tasgrid",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 4001",
@@ -18,6 +18,7 @@
     "@formkit/auto-animate": "^0.9.0",
     "@kobalte/core": "^0.13.11",
     "@tailwindcss/vite": "^4.1.18",
+    "@thisbeyond/solid-dnd": "^0.7.5",
     "@tiptap/core": "^3.18.0",
     "@tiptap/extension-bubble-menu": "^3.20.0",
     "@tiptap/extension-dropcursor": "^3.20.0",
@@ -41,6 +42,7 @@
     "autoprefixer": "^10.4.23",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "heic2any": "^0.0.4",
     "lucide-solid": "^0.563.0",
     "pm2": "^6.0.14",
     "pocketbase": "^0.26.8",
@@ -61,4 +63,4 @@
     "vite": "^7.2.4",
     "vite-plugin-solid": "^2.11.10"
   }
-}
+}

public/loading_data_from_Prism.md

@@ -0,0 +1,44 @@
+# Accessing Job Files from Sister App
+
+This plan outlines how a sister application can access job data and physical files managed by Prism.
+
+## Proposed Strategy
+
+### 1. Accessing Job Metadata (Database)
+The source of truth for all job information (names, numbers, addresses, and file paths) is the PocketBase instance.
+
+**Recommendation: Direct PocketBase SDK Integration**
+- The sister app should use the [PocketBase JavaScript/TypeScript SDK](https://github.com/pocketbase/js-sdk).
+- Point the SDK to the same URL as Prism (e.g., `http://127.0.0.1:8090` or your production domain).
+- **Authentication**: The sister app will need its own authentication or a way to share the `pb_auth` token.
+
+### 2. Accessing Physical Files (NAS/Local Folders)
+Prism uses two types of file links:
+- **`Job_Folder_Link`**: URLs (SharePoint, OneDrive, etc.). These can be opened directly as `<a>` tags or via `window.open()`.
+- **`Folder_Local`**: UNC paths (e.g., `\\server\share\folder`).
+
+**Recommendation: Shared Local RPC Tool**
+- Prism currently uses a local helper running on `http://localhost:8080` to open folders in File Explorer.
+- The sister app can use the exact same logic found in [nasOpener.ts](file:///c:/Users/TimothyCardoza/Documents/AI-Apps/Prism/PRISM/src/lib/nasOpener.ts) to communicate with this tool.
+- This allows both apps to provide a seamless "Open Folder" experience on the same machine.
+
+### 3. Proposed API Enhancements (Optional)
+If the sister app cannot talk to PocketBase directly (e.g., security restrictions), we can add a "Service Account" or "API Key" mechanism to Prism to proxy requests.
+
+## Proposed Changes
+
+### [Component Name]
+No changes are strictly required to Prism's code unless you want a dedicated API for the sister app. 
+
+#### [MODIFY] [nasOpener.ts](file:///c:/Users/TimothyCardoza/Documents/AI-Apps/Prism/PRISM/src/lib/nasOpener.ts)
+- Potentially export the RPC URL as a shared constant if both apps are in the same monorepo or share a library.
+
+## Verification Plan
+
+### Automated Tests
+- Test that the sister app can fetch job data from PocketBase using the same collection names (`Job_Info_Prod`).
+- Verify that `http://localhost:8080/health` is reachable from the sister app's environment.
+
+### Manual Verification
+- Attempt to open a job folder from the sister app and confirm it opens in the local system's File Explorer.
+- Confirm that the sister app correctly resolves job IDs to their respective `Job_Number` or metadata.

public/tasgrid-sdk.js

@@ -0,0 +1,114 @@
+/**
+ * TasGrid SDK
+ * 
+ * A headless utility for creating tasks in the TasGrid PocketBase database
+ * from sister applications, ensuring all TasGrid defaults and date calculations
+ * are applied consistently.
+ */
+
+const URGENCY_HOURS = {
+    10: 12,
+    9: 24,
+    8: 36,
+    7: 72,
+    6: 120,
+    5: 240,
+    4: 504,
+    3: 1080,
+    2: 2160,
+    1: 4320
+};
+
+/**
+ * Calculates a future ISO date string based on the TasGrid urgency decay algorithm.
+ * @param {number} level Urgency level (1-10)
+ * @returns {string} ISO Date string
+ */
+export const calculateDateFromUrgency = (level) => {
+    const roundedLevel = Math.max(1, Math.min(10, Math.round(level)));
+    const hours = URGENCY_HOURS[roundedLevel] || 24;
+    return new Date(Date.now() + hours * 60 * 60 * 1000).toISOString();
+};
+
+/**
+ * Creates a new task in the TasGrid database using the provided PocketBase instance.
+ * 
+ * @param {object} pb - An authenticated PocketBase JS SDK instance.
+ * @param {object} payload - The task payload.
+ * @param {string} [payload.title="New Task"] - The task title.
+ * @param {string} [payload.owner] - PocketBase User ID. Defaults to pb.authStore.model.id.
+ * @param {number} [payload.priority=5] - Priority (1-10).
+ * @param {number} [payload.urgency=5] - Urgency (1-10). Used to calculate dueDate if omitted.
+ * @param {number} [payload.size=3] - Size (0-10).
+ * @param {number} [payload.status=0] - Status (0-10).
+ * @param {boolean} [payload.completed=false] - Completion status.
+ * @param {string[]} [payload.tags=[]] - Array of tag strings.
+ * @param {string} [payload.content=""] - HTML string for task description/notes.
+ * @param {string} [payload.dueDate] - Strict ISO Date string. Overrides urgency calculation.
+ * @param {string} [payload.startDate=""] - ISO Date string.
+ * @returns {Promise<object>} The created PocketBase task record.
+ */
+export const createTasgridTask = async (pb, payload = {}) => {
+    if (!pb || !pb.authStore || !pb.authStore.isValid || !pb.authStore.model) {
+        throw new Error("Invalid or unauthenticated PocketBase instance provided.");
+    }
+
+    const urgencyVal = payload.urgency ?? 5;
+
+    const taskData = {
+        title: payload.title || "New Task",
+        priority: payload.priority ?? 5,
+        size: payload.size ?? 3,
+        status: payload.status ?? 0,
+        completed: payload.completed ?? false,
+        tags: payload.tags || [],
+        content: payload.content || "",
+        user: payload.owner || pb.authStore.model.id,
+        dueDate: payload.dueDate || calculateDateFromUrgency(urgencyVal),
+        startDate: payload.startDate || "",
+    };
+
+    try {
+        const record = await pb.collection('TasGrid').create(taskData);
+        return record;
+    } catch (err) {
+        console.error("TasGrid SDK: Failed to create task", err);
+        throw err;
+    }
+};
+
+/**
+ * Creates a new note in the TasGrid database using the provided PocketBase instance.
+ * 
+ * @param {object} pb - An authenticated PocketBase JS SDK instance.
+ * @param {object} payload - The note payload.
+ * @param {string} [payload.title="New Note"] - The note title.
+ * @param {string} [payload.content=""] - HTML string for note content.
+ * @param {string[]} [payload.tags=[]] - Array of tag strings.
+ * @param {boolean} [payload.isPrivate=false] - Whether the note is private.
+ * @param {string[]} [payload.tasks=[]] - Array of task IDs to link.
+ * @param {string} [payload.owner] - PocketBase User ID. Defaults to pb.authStore.model.id.
+ * @returns {Promise<object>} The created PocketBase note record.
+ */
+export const createTasgridNote = async (pb, payload = {}) => {
+    if (!pb || !pb.authStore || !pb.authStore.isValid || !pb.authStore.model) {
+        throw new Error("Invalid or unauthenticated PocketBase instance provided.");
+    }
+
+    const noteData = {
+        title: payload.title || "New Note",
+        content: payload.content || "",
+        tags: payload.tags || [],
+        isPrivate: payload.isPrivate || false,
+        tasks: payload.tasks || [],
+        user: payload.owner || pb.authStore.model.id,
+    };
+
+    try {
+        const record = await pb.collection('TasGrid_Notes').create(noteData);
+        return record;
+    } catch (err) {
+        console.error("TasGrid SDK: Failed to create note", err);
+        throw err;
+    }
+};

src/App.tsx

@@ -92,53 +92,63 @@ const App: Component = () => {
     return view;
   };
 
-  return (
-    <Show
-      when={isEmbed()}
-      fallback={
-        <Show when={isAuthenticated()} fallback={<AuthCallback onSuccess={() => { }} />}>
-          <Layout currentView={currentView()} setView={setCurrentView}>
-            <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
-              <Show when={currentView() === "critical"}><CriticalView /></Show>
-              <Show when={currentView() === "urgency"}><UrgencyView /></Show>
-              <Show when={currentView() === "priority"}><PriorityView /></Show>
-              <Show when={currentView() === "matrix"}><MatrixView /></Show>
-              <Show when={currentView() === "snowball"}><SnowballView /></Show>
-              <Show when={currentView() === "dig_in"}><DigInView /></Show>
-              <Show when={currentView() === "progress"}><ProgressView /></Show>
-              <Show when={currentView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
-              <Show when={currentView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
-            </Suspense>
-          </Layout>
+    return (
+        <Show
+            when={isEmbed()}
+            fallback={
+                <Show when={isAuthenticated()} fallback={<AuthCallback onSuccess={() => { }} />}>
+                    <Layout currentView={currentView()} setView={setCurrentView}>
+                        <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
+                            <Show when={currentView() === "critical"}><CriticalView /></Show>
+                            <Show when={currentView() === "urgency"}><UrgencyView /></Show>
+                            <Show when={currentView() === "priority"}><PriorityView /></Show>
+                            <Show when={currentView() === "matrix"}><MatrixView /></Show>
+                            <Show when={currentView() === "snowball"}><SnowballView /></Show>
+                            <Show when={currentView() === "dig_in"}><DigInView /></Show>
+                            <Show when={currentView() === "progress"}><ProgressView /></Show>
+                            <Show when={currentView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
+                            <Show when={currentView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
+                        </Suspense>
+                    </Layout>
+                </Show>
+            }
+        >
+            {(() => {
+                const isPublicNote = () => {
+                    const view = getEmbedView();
+                    const urlObj = new URL(location());
+                    const noteId = new URLSearchParams(urlObj.search).get('noteId') || 
+                                 (urlObj.hash.includes('?') ? new URLSearchParams(urlObj.hash.substring(urlObj.hash.indexOf('?'))).get('noteId') : null);
+                    return view === 'embed_notes' && !!noteId;
+                };
+
+                return (
+                    <EmbedAuthWrapper skipAuth={isPublicNote()}>
+                        <EmbedLayout>
+                            <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
+                                <Show when={getEmbedView() === 'embed_notes'}>
+                                    {(() => {
+                                        const noteIdFromUrl = createMemo(() => {
+                                            const urlObj = new URL(location());
+                                            let noteId = new URLSearchParams(urlObj.search).get('noteId');
+                                            if (!noteId && urlObj.hash.includes('?')) {
+                                                const hashQueryString = urlObj.hash.substring(urlObj.hash.indexOf('?'));
+                                                noteId = new URLSearchParams(hashQueryString).get('noteId');
+                                            }
+                                            return noteId;
+                                        });
+                                        return <NotepadView selectedNoteId={noteIdFromUrl()} setSelectedNoteId={() => { }} hideNavigation={!!noteIdFromUrl()} />;
+                                    })()}
+                                </Show>
+                                <Show when={getEmbedView() === 'embed_quick_add'}>
+                                    <QuickEntryForm autoFocus={true} />
+                                </Show>
+                            </Suspense>
+                        </EmbedLayout>
+                    </EmbedAuthWrapper>
+                );
+            })()}
         </Show>
-      }
-    >
-      <EmbedAuthWrapper>
-        <EmbedLayout>
-          <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
-            <Show when={getEmbedView() === 'embed_notes'}>
-              {(() => {
-                const noteIdFromUrl = createMemo(() => {
-                  const urlObj = new URL(location());
-                  let noteId = new URLSearchParams(urlObj.search).get('noteId');
-                  // Production likely uses hash routing, so check hash for query params too
-                  if (!noteId && urlObj.hash.includes('?')) {
-                    const hashQueryString = urlObj.hash.substring(urlObj.hash.indexOf('?'));
-                    noteId = new URLSearchParams(hashQueryString).get('noteId');
-                  }
-                  return noteId;
-                });
-                console.log('[DEBUG App] Rendering embed/notes context. noteId trace:', noteIdFromUrl());
-                return <NotepadView selectedNoteId={noteIdFromUrl()} setSelectedNoteId={() => { }} hideNavigation={!!noteIdFromUrl()} />;
-              })()}
-            </Show>
-            <Show when={getEmbedView() === 'embed_quick_add'}>
-              <QuickEntryForm autoFocus={true} />
-            </Show>
-          </Suspense>
-        </EmbedLayout>
-      </EmbedAuthWrapper>
-    </Show>
   );
 };
 

src/components/EmbedAuthWrapper.tsx

@@ -3,12 +3,14 @@ import { pb } from "@/lib/pocketbase";
 
 interface EmbedAuthWrapperProps {
     children: JSX.Element;
+    skipAuth?: boolean;
 }
 
 export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
-    const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);
+    const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid || !!props.skipAuth);
 
     const handleMessage = (event: MessageEvent) => {
+        if (props.skipAuth) return; // Don't process auth messages in skip mode
         const { data } = event;
         console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type);
         if (data?.type === "TASGRID_AUTH" && data.token) {
@@ -20,7 +22,7 @@ export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
     };
 
     onMount(() => {
-        console.log('[DEBUG] EmbedAuthWrapper mounted. Initial isHydrated:', isHydrated());
+        console.log('[DEBUG] EmbedAuthWrapper mounted. Initial isHydrated:', isHydrated(), 'skipAuth:', props.skipAuth);
         window.addEventListener("message", handleMessage);
     });
 
@@ -30,7 +32,7 @@ export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
 
     return (
         <Show
-            when={isHydrated()}
+            when={isHydrated() || props.skipAuth}
             fallback={
                 <div class="flex flex-col items-center justify-center h-full space-y-4">
                     <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>

src/components/FilterBar.tsx

@@ -1,29 +1,70 @@
 import { type Component, createSignal, For, Show } from "solid-js";
-import { Search, X, Tag, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark } from "lucide-solid";
-import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate, loadAllHistory } from "@/store";
+import { Search, X, Tag, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark, User, Star } from "lucide-solid";
+import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate, loadAllHistory, setNoteFilter, clearNoteFilter, saveNoteFilterTemplate, applyNoteFilterTemplate, removeNoteFilterTemplate, type Filter } from "@/store";
 import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
 import { Badge } from "./ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
 
-export const FilterBar: Component = () => {
+export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, triggerClass?: string }> = (props) => {
     const { resolvedTheme } = useTheme();
     const [isOpen, setIsOpen] = createSignal(false);
+    const [isTagOpen, setIsTagOpen] = createSignal(false);
+    const [tagSearch, setTagSearch] = createSignal("");
     const [newTemplateName, setNewTemplateName] = createSignal("");
     const [isSaving, setIsSaving] = createSignal(false);
+    const [isJobStatusOpen, setIsJobStatusOpen] = createSignal(false);
+    const [isJobDivisionOpen, setIsJobDivisionOpen] = createSignal(false);
+
+    const mode = () => props.mode || 'tasks';
+
+    const currentFilter = () => mode() === 'tasks' ? store.filter : store.noteFilter;
+    const currentSetFilter = (val: Partial<Filter>) => mode() === 'tasks' ? setFilter(val) : setNoteFilter(val);
+    const currentClearFilter = () => mode() === 'tasks' ? clearFilter() : clearNoteFilter();
+    const currentSaveTemplate = (name: string) => mode() === 'tasks' ? saveFilterTemplate(name) : saveNoteFilterTemplate(name);
+    const currentApplyTemplate = (id: string) => mode() === 'tasks' ? applyFilterTemplate(id) : applyNoteFilterTemplate(id);
+    const currentRemoveTemplate = (id: string) => mode() === 'tasks' ? removeFilterTemplate(id) : removeNoteFilterTemplate(id);
 
     const hasActiveFilters = () => {
-        const f = store.filter;
-        return f.query !== "" || f.tags.length > 0 || f.priorityMin !== 1 || f.priorityMax !== 10 || f.urgencyMin !== 1 || f.urgencyMax !== 10 || f.editedToday;
+        const f = currentFilter();
+        const baseActive = (f.query || "") !== "" || (f.tags || []).length > 0 || f.editedToday || f.ownedByMe || f.starred;
+        const jobActive = (f.jobStatus?.length || 0) > 0 || (f.jobDivision?.length || 0) > 0;
+        if (mode() === 'tasks') {
+            return baseActive || f.priorityMin !== 1 || f.priorityMax !== 10 || f.urgencyMin !== 1 || f.urgencyMax !== 10;
+        }
+        return baseActive || jobActive;
     };
 
     const allTags = () => store.tagDefinitions.map(d => d.name).sort();
+    const JOB_STATUSES = [
+        "Estimating",
+        "Est Sent",
+        "Est Hold",
+        "Follow Up",
+        "Awarded",
+        "In Progress",
+        "On Hold",
+        "Billed (In Progress)",
+        "Billed (Closed)",
+        "Archive",
+        "Not Awarded",
+        "Not Bidding"
+    ];
+    const JOB_DIVISIONS = ["C#", "R#", "S#"];
+    const normalizeFilterTags = (items: Array<string | { name: string; excluded: boolean }> | undefined) => {
+        if (!items) return [] as { name: string; excluded: boolean }[];
+        return items.map((i: any) => {
+            if (typeof i === "string") return { name: i, excluded: false };
+            return { name: i.name, excluded: !!i.excluded };
+        });
+    };
 
     return (
-        <div class="fixed top-4 right-5 sm:right-6 z-[60]">
+        <div class={cn(mode() === 'tasks' ? "fixed top-4 right-5 sm:right-6 z-[60]" : "relative", props.class)}>
             <Popover open={isOpen()} onOpenChange={setIsOpen}>
                 <PopoverTrigger
                     as={Button}
@@ -32,18 +73,23 @@ export const FilterBar: Component = () => {
                     class={cn(
                         "bg-background/80 backdrop-blur-sm border border-border hover:bg-muted shadow-sm transition-all duration-300",
                         hasActiveFilters() && "border-primary/50 ring-1 ring-primary/20",
-                        isOpen() && "bg-muted ring-1 ring-border"
+                        isOpen() && "bg-muted ring-1 ring-border",
+                        props.triggerClass
                     )}
                     title="Filters & Search"
                 >
                     <div class="relative">
-                        <Search size={18} class={cn("transition-transform duration-300", isOpen() && "scale-110")} />
-                        {hasActiveFilters() && !isOpen() && (
-                            <div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary animate-pulse border border-background" />
-                        )}
+                        <Search
+                            size={18}
+                            class={cn(
+                                "transition-transform duration-300",
+                                isOpen() && "scale-110",
+                                hasActiveFilters() && "text-primary"
+                            )}
+                        />
                     </div>
                 </PopoverTrigger>
-                <PopoverContent class="w-[calc(100vw-2rem)] sm:w-[480px] p-0 overflow-hidden bg-card border-border shadow-2xl rounded-2xl animate-in fade-in zoom-in-95 duration-200">
+                <PopoverContent class="w-[calc(100vw-2rem)] sm:w-[480px] p-0 overflow-hidden bg-card border-border shadow-2xl rounded-2xl animate-in fade-in zoom-in-95 duration-200 z-[100]">
                     {/* Header */}
                     <div class="px-4 py-3 border-b border-border/50 bg-muted/20 flex items-center justify-between">
                         <div class="flex items-center gap-4">
@@ -53,37 +99,63 @@ export const FilterBar: Component = () => {
                             </h3>
                             <div class="h-4 w-px bg-border/50" />
                             <button
-                                onClick={() => setFilter({ editedToday: !store.filter.editedToday })}
+                                onClick={() => currentSetFilter({ editedToday: !currentFilter().editedToday })}
                                 class={cn(
                                     "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
-                                    store.filter.editedToday
+                                    currentFilter().editedToday
                                         ? "bg-primary/10 text-primary border-primary/20"
                                         : "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
                                 )}
                             >
-                                <div class={cn("w-1.5 h-1.5 rounded-full", store.filter.editedToday ? "bg-primary" : "bg-muted-foreground/30")} />
+                                <div class={cn("w-1.5 h-1.5 rounded-full", currentFilter().editedToday ? "bg-primary" : "bg-muted-foreground/30")} />
                                 Edited Today
                             </button>
+                            <button
+                                onClick={() => currentSetFilter({ ownedByMe: !currentFilter().ownedByMe })}
+                                class={cn(
+                                    "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
+                                    currentFilter().ownedByMe
+                                        ? "bg-primary/10 text-primary border-primary/20"
+                                        : "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
+                                )}
+                            >
+                                <User size={10} class={cn(currentFilter().ownedByMe ? "text-primary" : "text-muted-foreground/50")} />
+                                Mine
+                            </button>
+                            <button
+                                onClick={() => currentSetFilter({ starred: !currentFilter().starred })}
+                                class={cn(
+                                    "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
+                                    currentFilter().starred
+                                        ? "bg-amber-500/10 text-amber-500 border-amber-500/20"
+                                        : "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
+                                )}
+                            >
+                                <Star size={10} class={cn(currentFilter().starred ? "fill-amber-500 text-amber-500" : "text-muted-foreground/50")} />
+                                Starred
+                            </button>
                         </div>
                         <div class="flex items-center gap-2">
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-primary"
-                                onClick={() => {
-                                    loadAllHistory();
-                                    setIsOpen(false);
-                                }}
-                                title="Load all completed tasks"
-                            >
-                                Load All
-                            </Button>
+                            <Show when={mode() === 'tasks'}>
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-primary"
+                                    onClick={() => {
+                                        loadAllHistory();
+                                        setIsOpen(false);
+                                    }}
+                                    title="Load all completed tasks"
+                                >
+                                    Load All
+                                </Button>
+                            </Show>
                             <Show when={hasActiveFilters()}>
                                 <Button
                                     variant="ghost"
                                     size="sm"
                                     class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
-                                    onClick={clearFilter}
+                                    onClick={currentClearFilter}
                                 >
                                     Clear
                                 </Button>
@@ -110,9 +182,9 @@ export const FilterBar: Component = () => {
                                         if (el) setTimeout(() => el.focus(), 50);
                                     }}
                                     type="text"
-                                    placeholder="Search tasks, descriptions, tags..."
-                                    value={store.filter.query}
-                                    onInput={(e) => setFilter({ query: e.currentTarget.value })}
+                                    placeholder={mode() === 'tasks' ? "Search tasks, descriptions, tags..." : "Search notes, tags..."}
+                                    value={currentFilter().query}
+                                    onInput={(e) => currentSetFilter({ query: e.currentTarget.value })}
                                     onKeyDown={(e) => {
                                         if (e.key === 'Enter') {
                                             e.preventDefault();
@@ -124,77 +196,233 @@ export const FilterBar: Component = () => {
                             </div>
                         </div>
 
-                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                            {/* Priority Range */}
-                            <div class="space-y-2.5">
-                                <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
-                                <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
-                                    <Select
-                                        value={store.filter.priorityMin.toString()}
-                                        onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
-                                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
-                                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                    >
-                                        <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
-                                            <div class="flex items-center gap-2 justify-center">
-                                                <ArrowUpCircle size={14} class="text-muted-foreground/70" />
-                                                <span>Min: {store.filter.priorityMin}</span>
-                                            </div>
-                                        </SelectTrigger>
-                                        <SelectContent />
-                                    </Select>
-                                    <div class="w-px h-4 bg-border/50" />
-                                    <Select
-                                        value={store.filter.priorityMax.toString()}
-                                        onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
-                                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
-                                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                    >
-                                        <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
-                                            <div class="flex items-center gap-2 justify-center">
-                                                <span>Max: {store.filter.priorityMax}</span>
-                                            </div>
-                                        </SelectTrigger>
-                                        <SelectContent />
-                                    </Select>
+                        <Show when={mode() === 'tasks'}>
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                                {/* Priority Range */}
+                                <div class="space-y-2.5">
+                                    <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
+                                    <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
+                                        <Select
+                                            value={store.filter.priorityMin.toString()}
+                                            onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
+                                            options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                        >
+                                            <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
+                                                <div class="flex items-center gap-2 justify-center">
+                                                    <ArrowUpCircle size={14} class="text-muted-foreground/70" />
+                                                    <span>Min: {store.filter.priorityMin}</span>
+                                                </div>
+                                            </SelectTrigger>
+                                            <SelectContent />
+                                        </Select>
+                                        <div class="w-px h-4 bg-border/50" />
+                                        <Select
+                                            value={store.filter.priorityMax.toString()}
+                                            onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
+                                            options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                        >
+                                            <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
+                                                <div class="flex items-center gap-2 justify-center">
+                                                    <span>Max: {store.filter.priorityMax}</span>
+                                                </div>
+                                            </SelectTrigger>
+                                            <SelectContent />
+                                        </Select>
+                                    </div>
                                 </div>
-                            </div>
 
-                            {/* Urgency Range */}
-                            <div class="space-y-2.5">
-                                <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
-                                <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
-                                    <Select
-                                        value={store.filter.urgencyMin.toString()}
-                                        onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
-                                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
-                                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                    >
-                                        <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
-                                            <div class="flex items-center gap-2 justify-center">
-                                                <Clock size={14} class="text-muted-foreground/70" />
-                                                <span>Min: {store.filter.urgencyMin}</span>
-                                            </div>
-                                        </SelectTrigger>
-                                        <SelectContent />
-                                    </Select>
-                                    <div class="w-px h-4 bg-border/50" />
-                                    <Select
-                                        value={store.filter.urgencyMax.toString()}
-                                        onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
-                                        options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
-                                        itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                    >
-                                        <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
-                                            <div class="flex items-center gap-2 justify-center">
-                                                <span>Max: {store.filter.urgencyMax}</span>
-                                            </div>
-                                        </SelectTrigger>
-                                        <SelectContent />
-                                    </Select>
+                                {/* Urgency Range */}
+                                <div class="space-y-2.5">
+                                    <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
+                                    <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
+                                        <Select
+                                            value={store.filter.urgencyMin.toString()}
+                                            onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
+                                            options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                        >
+                                            <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
+                                                <div class="flex items-center gap-2 justify-center">
+                                                    <Clock size={14} class="text-muted-foreground/70" />
+                                                    <span>Min: {store.filter.urgencyMin}</span>
+                                                </div>
+                                            </SelectTrigger>
+                                            <SelectContent />
+                                        </Select>
+                                        <div class="w-px h-4 bg-border/50" />
+                                        <Select
+                                            value={store.filter.urgencyMax.toString()}
+                                            onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
+                                            options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
+                                            itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                        >
+                                            <SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
+                                                <div class="flex items-center gap-2 justify-center">
+                                                    <span>Max: {store.filter.urgencyMax}</span>
+                                                </div>
+                                            </SelectTrigger>
+                                            <SelectContent />
+                                        </Select>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
+                        </Show>
+                        <Show when={mode() === 'notes'}>
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                                <div class="space-y-2.5">
+                                    <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Job Status</label>
+                                    <div class="flex flex-wrap gap-2 min-h-[44px] p-2 bg-muted/10 border border-dashed border-border/60 rounded-xl">
+                                        <For each={normalizeFilterTags(currentFilter().jobStatus as any)}>
+                                            {(status) => (
+                                                <Badge
+                                                    variant="secondary"
+                                                    class={cn(
+                                                        "h-7 px-2.5 rounded-lg text-xs gap-2 transition-all border shadow-sm",
+                                                        status.excluded
+                                                            ? "bg-red-500/10 text-red-600 border-red-500/20 hover:bg-red-500/20"
+                                                            : "bg-blue-500/10 text-blue-600 border-blue-500/20 hover:bg-blue-500/20"
+                                                    )}
+                                                >
+                                                    <div
+                                                        class="flex items-center gap-2 cursor-pointer h-full"
+                                                        onClick={() => {
+                                                            const current = normalizeFilterTags(currentFilter().jobStatus as any);
+                                                            const next = current.map(s =>
+                                                                s.name === status.name ? { ...s, excluded: !s.excluded } : s
+                                                            );
+                                                            currentSetFilter({ jobStatus: next as any });
+                                                        }}
+                                                    >
+                                                        <Show when={status.excluded} fallback={<Tag size={12} class="opacity-70" />}>
+                                                            <Minus size={12} class="opacity-100" />
+                                                        </Show>
+                                                        <span class={cn(status.excluded && "line-through opacity-70")}>{status.name}</span>
+                                                    </div>
+                                                    <button
+                                                        class="p-0.5 hover:bg-foreground/10 rounded transition-colors"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            const next = normalizeFilterTags(currentFilter().jobStatus as any).filter(s => s.name !== status.name);
+                                                            currentSetFilter({ jobStatus: next as any });
+                                                        }}
+                                                    >
+                                                        <X size={10} />
+                                                    </button>
+                                                </Badge>
+                                            )}
+                                        </For>
+                                        <Popover open={isJobStatusOpen()} onOpenChange={setIsJobStatusOpen}>
+                                            <PopoverTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
+                                                <span>+ Status</span>
+                                            </PopoverTrigger>
+                                            <PopoverContent class="w-[220px] p-0" align="start">
+                                                <Command>
+                                                    <CommandInput placeholder="Search status..." />
+                                                    <CommandList>
+                                                        <CommandEmpty>No status found.</CommandEmpty>
+                                                        <CommandGroup>
+                                                            <For each={JOB_STATUSES}>
+                                                                {(status) => (
+                                                                    <CommandItem
+                                                                        value={status}
+                                                                        onSelect={() => {
+                                                                            const current = normalizeFilterTags(currentFilter().jobStatus as any);
+                                                                            if (!current.some(s => s.name === status)) {
+                                                                                currentSetFilter({ jobStatus: [...current, { name: status, excluded: false }] as any });
+                                                                            }
+                                                                            setIsJobStatusOpen(false);
+                                                                        }}
+                                                                    >
+                                                                        {status}
+                                                                    </CommandItem>
+                                                                )}
+                                                            </For>
+                                                        </CommandGroup>
+                                                    </CommandList>
+                                                </Command>
+                                            </PopoverContent>
+                                        </Popover>
+                                    </div>
+                                </div>
+                                <div class="space-y-2.5">
+                                    <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Job Division</label>
+                                    <div class="flex flex-wrap gap-2 min-h-[44px] p-2 bg-muted/10 border border-dashed border-border/60 rounded-xl">
+                                        <For each={normalizeFilterTags(currentFilter().jobDivision as any)}>
+                                            {(division) => (
+                                                <Badge
+                                                    variant="secondary"
+                                                    class={cn(
+                                                        "h-7 px-2.5 rounded-lg text-xs gap-2 transition-all border shadow-sm",
+                                                        division.excluded
+                                                            ? "bg-red-500/10 text-red-600 border-red-500/20 hover:bg-red-500/20"
+                                                            : "bg-emerald-500/10 text-emerald-600 border-emerald-500/20 hover:bg-emerald-500/20"
+                                                    )}
+                                                >
+                                                    <div
+                                                        class="flex items-center gap-2 cursor-pointer h-full"
+                                                        onClick={() => {
+                                                            const current = normalizeFilterTags(currentFilter().jobDivision as any);
+                                                            const next = current.map(d =>
+                                                                d.name === division.name ? { ...d, excluded: !d.excluded } : d
+                                                            );
+                                                            currentSetFilter({ jobDivision: next as any });
+                                                        }}
+                                                    >
+                                                        <Show when={division.excluded} fallback={<Tag size={12} class="opacity-70" />}>
+                                                            <Minus size={12} class="opacity-100" />
+                                                        </Show>
+                                                        <span class={cn(division.excluded && "line-through opacity-70")}>{division.name}</span>
+                                                    </div>
+                                                    <button
+                                                        class="p-0.5 hover:bg-foreground/10 rounded transition-colors"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            const next = normalizeFilterTags(currentFilter().jobDivision as any).filter(d => d.name !== division.name);
+                                                            currentSetFilter({ jobDivision: next as any });
+                                                        }}
+                                                    >
+                                                        <X size={10} />
+                                                    </button>
+                                                </Badge>
+                                            )}
+                                        </For>
+                                        <Popover open={isJobDivisionOpen()} onOpenChange={setIsJobDivisionOpen}>
+                                            <PopoverTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
+                                                <span>+ Division</span>
+                                            </PopoverTrigger>
+                                            <PopoverContent class="w-[200px] p-0" align="start">
+                                                <Command>
+                                                    <CommandInput placeholder="Search division..." />
+                                                    <CommandList>
+                                                        <CommandEmpty>No division found.</CommandEmpty>
+                                                        <CommandGroup>
+                                                            <For each={JOB_DIVISIONS}>
+                                                                {(division) => (
+                                                                    <CommandItem
+                                                                        value={division}
+                                                                        onSelect={() => {
+                                                                            const current = normalizeFilterTags(currentFilter().jobDivision as any);
+                                                                            if (!current.some(d => d.name === division)) {
+                                                                                currentSetFilter({ jobDivision: [...current, { name: division, excluded: false }] as any });
+                                                                            }
+                                                                            setIsJobDivisionOpen(false);
+                                                                        }}
+                                                                    >
+                                                                        {division}
+                                                                    </CommandItem>
+                                                                )}
+                                                            </For>
+                                                        </CommandGroup>
+                                                    </CommandList>
+                                                </Command>
+                                            </PopoverContent>
+                                        </Popover>
+                                    </div>
+                                </div>
+                            </div>
+                        </Show>
 
                         {/* Tags Multi-select */}
                         <div class="space-y-2.5">
@@ -206,7 +434,7 @@ export const FilterBar: Component = () => {
                                 </span>
                             </label>
                             <div class="flex flex-wrap gap-2 min-h-[44px] p-2 bg-muted/10 border border-dashed border-border/60 rounded-xl">
-                                <For each={store.filter.tags}>
+                                <For each={currentFilter().tags}>
                                     {(tag) => (
                                         <Badge
                                             variant="secondary"
@@ -229,10 +457,10 @@ export const FilterBar: Component = () => {
                                             <div
                                                 class="flex items-center gap-2 cursor-pointer h-full"
                                                 onClick={() => {
-                                                    const newTags = store.filter.tags.map(t =>
+                                                    const newTags = currentFilter().tags.map(t =>
                                                         t.name === tag.name ? { ...t, excluded: !t.excluded } : t
                                                     );
-                                                    setFilter({ tags: newTags });
+                                                    currentSetFilter({ tags: newTags });
                                                 }}
                                             >
                                                 <Show when={tag.excluded} fallback={<Tag size={12} class="opacity-70" />}>
@@ -244,7 +472,7 @@ export const FilterBar: Component = () => {
                                                 class="p-0.5 hover:bg-foreground/10 rounded transition-colors"
                                                 onClick={(e) => {
                                                     e.stopPropagation();
-                                                    setFilter({ tags: store.filter.tags.filter(t => t.name !== tag.name) });
+                                                    currentSetFilter({ tags: currentFilter().tags.filter(t => t.name !== tag.name) });
                                                 }}
                                             >
                                                 <X size={10} />
@@ -252,22 +480,53 @@ export const FilterBar: Component = () => {
                                         </Badge>
                                     )}
                                 </For>
-                                <Select
-                                    value=""
-                                    onChange={(val) => {
-                                        if (val && !store.filter.tags.some(t => t.name === val)) {
-                                            setFilter({ tags: [...store.filter.tags, { name: val, excluded: false }] });
-                                        }
-                                    }}
-                                    options={allTags()}
-                                    placeholder="Add tag..."
-                                    itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                >
-                                    <SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
+                                <Popover open={isTagOpen()} onOpenChange={setIsTagOpen}>
+                                    <PopoverTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
                                         <span>+ Tag</span>
-                                    </SelectTrigger>
-                                    <SelectContent />
-                                </Select>
+                                    </PopoverTrigger>
+                                    <PopoverContent class="w-[200px] p-0" align="start">
+                                        <Command>
+                                            <CommandInput
+                                                placeholder="Search tags..."
+                                                value={tagSearch()}
+                                                onValueChange={setTagSearch}
+                                            />
+                                            <CommandList>
+                                                <Show when={allTags().filter(t => {
+                                                    if (t.startsWith('_')) return false;
+                                                    const search = tagSearch().toLowerCase();
+                                                    if (!search && (t.startsWith('@') || t.startsWith('#'))) return false;
+                                                    return t.toLowerCase().includes(search);
+                                                }).length === 0}>
+                                                    <CommandEmpty>No tags found.</CommandEmpty>
+                                                </Show>
+                                                <CommandGroup>
+                                                    <For each={allTags().filter(t => {
+                                                        if (t.startsWith('_')) return false;
+                                                        const search = tagSearch().toLowerCase();
+                                                        if (!search && (t.startsWith('@') || t.startsWith('#'))) return false;
+                                                        return t.toLowerCase().includes(search);
+                                                    })}>
+                                                        {(tag) => (
+                                                            <CommandItem
+                                                                value={tag}
+                                                                onSelect={() => {
+                                                                    if (!currentFilter().tags.some(t => t.name === tag)) {
+                                                                        currentSetFilter({ tags: [...currentFilter().tags, { name: tag, excluded: false }] });
+                                                                    }
+                                                                    setIsTagOpen(false);
+                                                                    setTagSearch("");
+                                                                }}
+                                                            >
+                                                                {tag}
+                                                            </CommandItem>
+                                                        )}
+                                                    </For>
+                                                </CommandGroup>
+                                            </CommandList>
+                                        </Command>
+                                    </PopoverContent>
+                                </Popover>
                             </div>
                         </div>
                     </div>
@@ -301,7 +560,7 @@ export const FilterBar: Component = () => {
                                     onKeyDown={(e) => {
                                         if (e.key === 'Enter') {
                                             if (newTemplateName().trim()) {
-                                                saveFilterTemplate(newTemplateName().trim());
+                                                currentSaveTemplate(newTemplateName().trim());
                                                 setNewTemplateName("");
                                                 setIsSaving(false);
                                             }
@@ -315,7 +574,7 @@ export const FilterBar: Component = () => {
                                     class="h-8 px-3"
                                     disabled={!newTemplateName().trim()}
                                     onClick={() => {
-                                        saveFilterTemplate(newTemplateName().trim());
+                                        currentSaveTemplate(newTemplateName().trim());
                                         setNewTemplateName("");
                                         setIsSaving(false);
                                     }}
@@ -343,7 +602,7 @@ export const FilterBar: Component = () => {
                                     <div class="group flex items-center justify-between p-2 rounded-xl bg-muted/20 border border-border/30 hover:bg-muted/40 transition-all">
                                         <button
                                             class="flex-1 text-left px-1 min-w-0"
-                                            onClick={() => applyFilterTemplate(template.id)}
+                                            onClick={() => currentApplyTemplate(template.id)}
                                         >
                                             <div class="flex items-center gap-2">
                                                 <p class="text-[0.6875rem] font-bold text-foreground truncate">{template.name}</p>
@@ -354,7 +613,7 @@ export const FilterBar: Component = () => {
                                                     <Show when={template.filter.tags.length > 0}>
                                                         <div class="w-1 h-1 rounded-full bg-indigo-500" />
                                                     </Show>
-                                                    <Show when={template.filter.priorityMin > 1 || template.filter.priorityMax < 10}>
+                                                    <Show when={mode() === 'tasks' && (template.filter.priorityMin > 1 || template.filter.priorityMax < 10)}>
                                                         <div class="w-1 h-1 rounded-full bg-amber-500" />
                                                     </Show>
                                                 </div>
@@ -364,7 +623,7 @@ export const FilterBar: Component = () => {
                                             class="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all"
                                             onClick={(e) => {
                                                 e.stopPropagation();
-                                                removeFilterTemplate(template.id);
+                                                currentRemoveTemplate(template.id);
                                             }}
                                         >
                                             <Trash2 size={12} />

src/components/JobFileSelector.tsx

@@ -0,0 +1,198 @@
+import { createSignal, createResource, Show, For, onMount } from "solid-js";
+import { pb } from "@/lib/pocketbase";
+import { store, activeNoteId } from "@/store";
+import { Search, File as FileIcon, Loader2, FolderOpen } from "lucide-solid";
+
+interface JobFileSelectorProps {
+    onSelectFile: (jobId: string, filename: string) => void;
+}
+
+export const JobFileSelector = (props: JobFileSelectorProps) => {
+    const [query, setQuery] = createSignal("");
+    const [selectedJobId, setSelectedJobId] = createSignal<string | null>(null);
+
+    // Auto-detect job ID from active note tags (traversing up hierarchy)
+    onMount(() => {
+        const currentNoteId = activeNoteId();
+        if (currentNoteId) {
+            let currentId = currentNoteId;
+            let currentNote = store.notes.find(n => n.id === currentId);
+            let depth = 0;
+
+            // Traverse up "child-of-" tags to find the root or any ancestor with a job_id
+            while (currentNote && depth < 10) {
+                const jobIdTag = currentNote.tags?.find(t => t.startsWith("job_id:"));
+                if (jobIdTag) {
+                    const id = jobIdTag.split(":")[1];
+                    if (id) {
+                        setSelectedJobId(id);
+                        return; // Found it!
+                    }
+                }
+
+                const parentTag = currentNote.tags?.find(t => t.startsWith("child-of-"));
+                if (!parentTag) break;
+
+                const parentId = parentTag.replace("child-of-", "");
+                const parent = store.notes.find(n => n.id === parentId);
+                if (!parent) break;
+
+                currentNote = parent;
+                depth++;
+            }
+        }
+    });
+
+    // Query Jobs
+    const [jobs] = createResource(query, async (q) => {
+        if (!q.trim()) return [];
+        try {
+            const res = await pb.collection('Job_Info_Prod').getList(1, 10, {
+                filter: `Job_Number ~ "${q}" || Job_Name ~ "${q}"`,
+                sort: '-created',
+                requestKey: null // Allow concurrent overlapping requests without auto-cancelling if needed, or leave it
+            });
+            return res.items;
+        } catch (e) {
+            return [];
+        }
+    });
+
+    // Fetch details for the selected job to list files
+    const [selectedJob] = createResource(selectedJobId, async (id) => {
+        if (!id) return null;
+        try {
+            const data = await pb.collection('Job_Info_Prod').getOne(id);
+            console.log("Job File Selector Selected Job Data:", data);
+            return data;
+        } catch (e) {
+            console.error("Job File Selector Error Fetching Job:", e);
+            return null;
+        }
+    });
+
+    const categories = ["plans", "EST_and_CO", "Addendums", "files"] as const;
+
+    return (
+        <div class="w-full flex flex-col items-center justify-center p-8 gap-6 bg-muted/10 rounded-xl relative">
+            <Show when={!selectedJobId()}>
+                <div class="text-center w-full max-w-lg space-y-4 relative z-10">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mx-auto mb-4">
+                        <FolderOpen size={24} />
+                    </div>
+                    <div class="space-y-1">
+                        <h3 class="font-semibold text-lg">Embed a Job File</h3>
+                        <p class="text-sm text-muted-foreground">Search for a Prism job to browse its files.</p>
+                    </div>
+
+                    <div class="relative w-full">
+                        <Search class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                        <input
+                            type="text"
+                            placeholder="Search by Job Name or Number..."
+                            class="w-full pl-9 pr-4 py-2 bg-background border border-border rounded-lg outline-none focus:ring-2 focus:ring-primary/50 transition-all text-sm"
+                            value={query()}
+                            onInput={(e) => setQuery(e.currentTarget.value)}
+                        />
+                    </div>
+
+                    <Show when={jobs.loading}>
+                        <div class="flex items-center justify-center py-4 text-muted-foreground">
+                            <Loader2 class="w-5 h-5 animate-spin" />
+                        </div>
+                    </Show>
+
+                    <Show when={jobs() && jobs()!.length > 0}>
+                        <div class="mt-4 border border-border bg-background rounded-lg shadow-sm overflow-hidden text-left flex flex-col">
+                            <For each={jobs()}>
+                                {(job) => (
+                                    <button
+                                        class="px-4 py-3 hover:bg-muted text-left flex flex-col gap-1 border-b border-border last:border-0 transition-colors cursor-pointer"
+                                        onClick={() => setSelectedJobId(job.id)}
+                                    >
+                                        <span class="font-medium text-sm text-foreground">{job.Job_Name || "Unnamed Job"}</span>
+                                        <span class="text-xs text-muted-foreground">Job #{job.Job_Number || job.id}</span>
+                                    </button>
+                                )}
+                            </For>
+                        </div>
+                    </Show>
+                </div>
+            </Show>
+
+            <Show when={selectedJobId()}>
+                <Show when={selectedJob.loading}>
+                    <div class="flex flex-col items-center justify-center gap-4 py-12 relative z-10">
+                        <Loader2 class="w-8 h-8 animate-spin text-primary" />
+                        <span class="text-sm text-muted-foreground font-medium">Loading Job Files...</span>
+                    </div>
+                </Show>
+
+                <Show when={selectedJob()}>
+                    {(jobRecord) => (
+                        <div class="w-full max-w-2xl bg-background rounded-xl border border-border shadow-sm overflow-hidden relative z-10">
+                            <div class="p-4 border-b border-border bg-muted/30 flex items-center justify-between">
+                                <div class="flex flex-col">
+                                    <h3 class="font-semibold">{jobRecord().Job_Name || "Unnamed Job"}</h3>
+                                    <span class="text-xs text-muted-foreground">Job #{jobRecord().Job_Number || jobRecord().id}</span>
+                                </div>
+                                <button
+                                    class="text-xs text-blue-500 hover:text-blue-600 font-medium px-2 py-1 hover:bg-blue-50 rounded transition-colors cursor-pointer"
+                                    onClick={() => setSelectedJobId(null)}
+                                >
+                                    Change Job
+                                </button>
+                            </div>
+
+                            <div class="p-4 flex flex-col gap-6 max-h-[400px] overflow-y-auto">
+                                <For each={categories}>
+                                    {(category) => {
+                                        let files = jobRecord()[category];
+                                        if (files === null || files === undefined || files === "") return null;
+                                        if (!Array.isArray(files)) files = [files];
+                                        files = files.filter(Boolean);
+
+                                        if (files.length === 0) return null;
+
+                                        return (
+                                            <div class="space-y-2">
+                                                <h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{category.replace(/_/g, " ")}</h4>
+                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                                                    <For each={files as string[]}>
+                                                        {(filename) => (
+                                                            <button
+                                                                class="flex items-center gap-3 p-2 rounded-md border border-border hover:bg-muted hover:border-primary/50 transition-colors text-left cursor-pointer group"
+                                                                onClick={() => props.onSelectFile(jobRecord().id, filename)}
+                                                            >
+                                                                <div class="p-2 rounded bg-muted text-muted-foreground group-hover:text-primary transition-colors shrink-0">
+                                                                    <FileIcon class="w-4 h-4" />
+                                                                </div>
+                                                                <span class="text-sm truncate font-medium text-foreground min-w-0" title={filename}>
+                                                                    {filename}
+                                                                </span>
+                                                            </button>
+                                                        )}
+                                                    </For>
+                                                </div>
+                                            </div>
+                                        );
+                                    }}
+                                </For>
+
+                                {/* Empty state if no files at all */}
+                                <Show when={categories.every(c => {
+                                    const val = jobRecord()[c];
+                                    return !val || (Array.isArray(val) && val.length === 0) || (typeof val === 'string' && val.trim() === '');
+                                })}>
+                                    <div class="text-center py-8 text-muted-foreground text-sm">
+                                        No files found for this job.
+                                    </div>
+                                </Show>
+                            </div>
+                        </div>
+                    )}
+                </Show>
+            </Show>
+        </div>
+    );
+};

src/components/Layout.tsx

@@ -188,6 +188,13 @@ export const Layout: Component<LayoutProps> = (props) => {
                     </div>
                 </div>
 
+                {/* Sync Progress Bar Overlay */}
+                <Show when={store.isInitializing}>
+                    <div class="fixed top-0 left-0 w-full h-0.5 z-[100] overflow-hidden bg-primary/10">
+                        <div class="h-full bg-primary animate-progress-fast w-1/3" />
+                    </div>
+                </Show>
+
                 {/* Main Content Area */}
                 <main class={cn(
                     "flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth",

src/components/NotesSidebar.tsx

@@ -1,25 +1,170 @@
-import { type Component, createSignal, createMemo, For, Show } from "solid-js";
-import { store } from "@/store";
+import { type Component, createMemo, createResource, For, Show } from "solid-js";
+import { store, setNoteFilter, getFavoriteTag } from "@/store";
 import { pb } from "@/lib/pocketbase";
-import { Plus, Lock, Search } from "lucide-solid";
+import { Plus, Lock, Star } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { NOTES_COLLECTION } from "@/lib/constants";
+import { FilterBar } from "./FilterBar";
 
 export const NotesSidebar: Component<{
     selectedNoteId: string | null;
     setSelectedNoteId: (id: string | null) => void;
 }> = (props) => {
-    const [searchQuery, setSearchQuery] = createSignal("");
     const currentUserId = pb.authStore.model?.id;
+    const [accessibleJobs] = createResource(currentUserId, async (userId) => {
+        if (!userId) return new Set<string>();
+        try {
+            const items = await pb.collection('Job_Info_Prod').getFullList({
+                filter: [
+                    `EstimatorUser = "${userId}"`,
+                    `OfficeRepUser = "${userId}"`,
+                    `ProjectManagerUser = "${userId}"`,
+                    `Estimator = "${userId}"`,
+                    `Office_Rep = "${userId}"`,
+                    `Project_Manager = "${userId}"`
+                ].join(" || "),
+                fields: "id",
+                requestKey: null
+            });
+            return new Set(items.map((r: any) => String(r.id)));
+        } catch (e) {
+            console.warn("Failed to load job access list for notes filter:", e);
+            return new Set<string>();
+        }
+    });
+    const [jobFilterIds] = createResource(
+        () => {
+            const f = store.noteFilter;
+            const normalize = (items: Array<string | { name: string; excluded: boolean }> | undefined) => {
+                if (!items) return [] as { name: string; excluded: boolean }[];
+                return items.map((i: any) => (typeof i === "string" ? { name: i, excluded: false } : { name: i.name, excluded: !!i.excluded }));
+            };
+            const status = normalize(f.jobStatus as any).sort((a, b) => a.name.localeCompare(b.name));
+            const division = normalize(f.jobDivision as any).sort((a, b) => a.name.localeCompare(b.name));
+            const key = JSON.stringify({ status, division });
+            return key;
+        },
+        async (key) => {
+            if (!key) return null;
+            const parsed = JSON.parse(key) as { status: Array<{ name: string; excluded: boolean }>; division: Array<{ name: string; excluded: boolean }> };
+            const status = parsed.status || [];
+            const division = parsed.division || [];
+            if (status.length === 0 && division.length === 0) return null;
+
+            const parts: string[] = [];
+            const statusInclude = status.filter(s => !s.excluded).map(s => s.name);
+            const statusExclude = status.filter(s => s.excluded).map(s => s.name);
+            const divisionInclude = division.filter(d => !d.excluded).map(d => d.name);
+            const divisionExclude = division.filter(d => d.excluded).map(d => d.name);
+
+            if (statusInclude.length > 0) {
+                parts.push(`(${statusInclude.map(s => `Job_Status = "${s}"`).join(" || ")})`);
+            }
+            if (statusExclude.length > 0) {
+                parts.push(`(${statusExclude.map(s => `Job_Status != "${s}"`).join(" && ")})`);
+            }
+            if (divisionInclude.length > 0) {
+                parts.push(`(${divisionInclude.map(d => `Job_Division = "${d}"`).join(" || ")})`);
+            }
+            if (divisionExclude.length > 0) {
+                parts.push(`(${divisionExclude.map(d => `Job_Division != "${d}"`).join(" && ")})`);
+            }
+
+            const filter = parts.join(" && ");
+            try {
+                const items = await pb.collection('Job_Info_Prod').getFullList({
+                    filter,
+                    fields: "id",
+                    requestKey: null
+                });
+                return new Set(items.map((r: any) => String(r.id)));
+            } catch (e) {
+                console.warn("Failed to load job filter list for notes:", e);
+                return new Set<string>();
+            }
+        }
+    );
 
     const filteredNotes = createMemo(() => {
-        let n = store.notes;
-        if (searchQuery()) {
-            const q = searchQuery().toLowerCase();
-            n = n.filter(note => note.title.toLowerCase().includes(q) || note.tags.some(t => t.toLowerCase().includes(q)));
+        const filter = store.noteFilter;
+        let n = store.notes.filter(note => {
+            if (note.deletedAt) return false;
+            // Hide child notes from the main list
+            if (note.tags && note.tags.some(t => t.startsWith("child-of-"))) return false;
+            return true;
+        });
+
+        // Query Filter
+        if (filter.query) {
+            const q = filter.query.toLowerCase();
+            n = n.filter(note =>
+                note.title.toLowerCase().includes(q) ||
+                note.tags.some(t => t.toLowerCase().includes(q))
+            );
         }
-        return n;
+
+        // Tags Filter
+        if (filter.tags.length > 0) {
+            const required = filter.tags.filter(t => !t.excluded).map(t => t.name);
+            const excluded = filter.tags.filter(t => t.excluded).map(t => t.name);
+
+            if (required.length > 0) {
+                n = n.filter(note => required.some(r => note.tags.includes(r)));
+            }
+            if (excluded.length > 0) {
+                n = n.filter(note => !excluded.some(e => note.tags.includes(e)));
+            }
+        }
+
+        // Edited Today Filter
+        if (filter.editedToday) {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            n = n.filter(note => {
+                const updated = new Date(note.updated);
+                return updated >= today;
+            });
+        }
+
+        // Owned By Me Filter
+        if (filter.ownedByMe) {
+            const accessible = accessibleJobs();
+            n = n.filter(note => {
+                if (note.tags?.includes("prism_job")) {
+                    if (!accessible) return false;
+                    const jobIdTag = note.tags.find(t => t.startsWith("job_id:"));
+                    const jobId = jobIdTag?.split(":")[1]?.trim();
+                    if (!jobId) return false;
+                    return accessible.has(jobId);
+                }
+                return note.user === currentUserId;
+            });
+        }
+
+        // Job Status / Division Filter (notes only)
+        if ((filter.jobStatus?.length || 0) > 0 || (filter.jobDivision?.length || 0) > 0) {
+            const allowedJobIds = jobFilterIds();
+            n = n.filter(note => {
+                if (!note.tags?.includes("prism_job")) return false;
+                if (!allowedJobIds) return false;
+                const jobIdTag = note.tags.find(t => t.startsWith("job_id:"));
+                const jobId = jobIdTag?.split(":")[1]?.trim();
+                if (!jobId) return false;
+                return allowedJobIds.has(jobId);
+            });
+        }
+
+        // Starred Filter
+        if (filter.starred) {
+            n = n.filter(note => note.tags?.includes(getFavoriteTag()));
+        }
+
+        return n.sort((a, b) => {
+            const titleA = a.title || "Untitled";
+            const titleB = b.title || "Untitled";
+            return titleB.localeCompare(titleA);
+        });
     });
 
     const handleCreateNote = async () => {
@@ -40,21 +185,29 @@ export const NotesSidebar: Component<{
 
     return (
         <div class="flex flex-col h-full bg-card">
-            {/* Header */}
-            <div class="p-4 border-b border-border bg-card/50 backdrop-blur flex justify-between items-center gap-2">
-                <div class="relative flex-1">
-                    <Search size={14} class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50" />
-                    <input
-                        type="text"
-                        placeholder="Search notes..."
-                        value={searchQuery()}
-                        onInput={(e) => setSearchQuery(e.currentTarget.value)}
-                        class="w-full bg-muted/50 border border-border/50 rounded-lg pl-8 pr-3 py-1.5 text-xs outline-none focus:ring-1 focus:ring-primary/30"
-                    />
+            <div class="z-20">
+                {/* Header */}
+                <div class="p-4 border-b border-border bg-card/50 backdrop-blur flex justify-between items-center gap-2">
+                    <div class="flex-1">
+                        <input
+                            type="text"
+                            placeholder="Search notes, tags..."
+                            value={store.noteFilter.query}
+                            onInput={(e) => setNoteFilter({ query: e.currentTarget.value })}
+                            class="w-full bg-muted/30 border border-border/50 rounded-xl px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all placeholder:text-muted-foreground/30"
+                        />
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                        <FilterBar
+                            mode="notes"
+                            class="relative top-0 right-0 z-0"
+                            triggerClass="h-9 w-9 p-0 bg-muted/40 hover:bg-muted/60 border-border/40"
+                        />
+                        <Button onClick={handleCreateNote} size="sm" variant="default" class="h-9 w-9 p-0 shrink-0 shadow-sm rounded-xl">
+                            <Plus size={18} />
+                        </Button>
+                    </div>
                 </div>
-                <Button onClick={handleCreateNote} size="sm" variant="default" class="h-8 w-8 p-0 shrink-0 shadow-sm">
-                    <Plus size={16} />
-                </Button>
             </div>
 
             {/* List */}
@@ -71,23 +224,28 @@ export const NotesSidebar: Component<{
                             )}
                         >
                             <div class="font-semibold text-sm truncate flex items-center justify-between">
-                                <span>{note.title || "Untitled"}</span>
+                                <div class="flex items-center gap-1.5 truncate">
+                                    <Show when={note.tags?.includes(getFavoriteTag())}>
+                                        <Star size={12} class="fill-amber-500 text-amber-500 shrink-0" />
+                                    </Show>
+                                    <span class="truncate">{note.title || "Untitled"}</span>
+                                </div>
                                 <Show when={note.isPrivate}>
                                     <Lock size={12} class="text-orange-500 shrink-0 ml-2" />
                                 </Show>
                             </div>
-                            <Show when={note.tags && note.tags.length > 0}>
+                            <Show when={note.tags && note.tags.some(t => !t.endsWith("_favorite__"))}>
                                 <div class="flex gap-1 mt-2 flex-wrap">
-                                    <For each={note.tags.slice(0, 3)}>
+                                    <For each={note.tags.filter(t => !t.endsWith("_favorite__")).slice(0, 3)}>
                                         {(t) => (
                                             <span class="text-[0.6rem] px-1.5 py-0.5 bg-muted rounded-md text-muted-foreground whitespace-nowrap border border-border/50">
                                                 {t}
                                             </span>
                                         )}
                                     </For>
-                                    <Show when={note.tags.length > 3}>
+                                    <Show when={note.tags.filter(t => !t.endsWith("_favorite__")).length > 3}>
                                         <span class="text-[0.6rem] px-1.5 py-0.5 text-muted-foreground whitespace-nowrap shrink-0">
-                                            +{note.tags.length - 3}
+                                            +{note.tags.filter(t => !t.endsWith("_favorite__")).length - 3}
                                         </span>
                                     </Show>
                                 </div>

src/components/PwaUpdater.tsx

@@ -0,0 +1,148 @@
+import { type Component, createEffect, onCleanup } from 'solid-js';
+import { useRegisterSW } from 'virtual:pwa-register/solid';
+import { toast } from 'solid-sonner';
+
+// We export a function so other parts of the app can manually trigger an update
+let manualUpdateFn: (() => void) | undefined;
+let updateAndReloadFn: (() => void) | undefined;
+
+export const forceServiceWorkerUpdate = () => {
+    if (manualUpdateFn) {
+        manualUpdateFn();
+    } else {
+        console.warn("PWA Updater not initialized yet");
+    }
+};
+
+export const updateAndReloadApp = () => {
+    if (updateAndReloadFn) {
+        updateAndReloadFn();
+    } else {
+        console.warn("PWA Updater not initialized yet; reloading directly.");
+        window.location.reload();
+    }
+};
+
+export const PwaUpdater: Component = () => {
+    let registration: ServiceWorkerRegistration | undefined;
+
+    const {
+        needRefresh: [needRefresh],
+        updateServiceWorker,
+    } = useRegisterSW({
+        onRegistered(r: ServiceWorkerRegistration | undefined) {
+            console.log('SW Registered:', r);
+            registration = r;
+
+            // Periodically check for updates (every 1 hour)
+            if (r) {
+                setInterval(() => {
+                    console.log('Periodic SW update check...');
+                    r.update();
+                }, 60 * 60 * 1000);
+            }
+        },
+        onRegisterError(error: Error | any) {
+            console.error('SW registration error', error);
+        },
+    });
+
+    createEffect(() => {
+        // Expose function globally
+        manualUpdateFn = () => {
+            if (needRefresh()) {
+                console.log('User manually forced an update. Reloading now...');
+                updateServiceWorker(true);
+            } else if (registration) {
+                console.log('User manually asked to check for updates...');
+                registration.update();
+            }
+        };
+
+        updateAndReloadFn = () => {
+            if (needRefresh()) {
+                console.log('Update ready. Reloading now...');
+                updateServiceWorker(true);
+                return;
+            }
+
+            if (registration) {
+                console.log('Checking for updates before reload...');
+                registration.update();
+            }
+
+            const start = Date.now();
+            const timeoutMs = 5000;
+            const poll = window.setInterval(() => {
+                if (needRefresh()) {
+                    console.log('Update found. Reloading with new SW...');
+                    window.clearInterval(poll);
+                    updateServiceWorker(true);
+                } else if (Date.now() - start > timeoutMs) {
+                    console.log('No update detected quickly. Reloading now...');
+                    window.clearInterval(poll);
+                    toast.info("No update found");
+                }
+            }, 250);
+        };
+    });
+
+    createEffect(() => {
+        // Check for updates when the app regains focus/visibility
+        const handleVisibilityFocus = () => {
+            if (document.visibilityState === 'visible' && registration) {
+                console.log('App became visible, checking for SW updates...');
+                registration.update();
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleVisibilityFocus);
+        window.addEventListener('focus', handleVisibilityFocus);
+
+        onCleanup(() => {
+            document.removeEventListener('visibilitychange', handleVisibilityFocus);
+            window.removeEventListener('focus', handleVisibilityFocus);
+        });
+    });
+
+    createEffect(() => {
+        if (needRefresh()) {
+            console.log('New PWA version available. Monitoring for idle/hidden state to update...');
+
+            let idleTimeout: number | undefined;
+
+            const triggerUpdate = () => {
+                console.log('Triggering PWA update...');
+                updateServiceWorker(true);
+            };
+
+            const resetIdle = () => {
+                if (idleTimeout) window.clearTimeout(idleTimeout);
+                // 10 minutes idle
+                idleTimeout = window.setTimeout(triggerUpdate, 10 * 60 * 1000);
+            };
+
+            const handleVisibility = () => {
+                if (document.visibilityState === 'hidden') {
+                    triggerUpdate();
+                }
+            };
+
+            // Start idle timer
+            resetIdle();
+
+            // Listen for user activity
+            const events = ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart'];
+            events.forEach(e => window.addEventListener(e, resetIdle, { passive: true }));
+            document.addEventListener('visibilitychange', handleVisibility);
+
+            onCleanup(() => {
+                if (idleTimeout) window.clearTimeout(idleTimeout);
+                events.forEach(e => window.removeEventListener(e, resetIdle));
+                document.removeEventListener('visibilitychange', handleVisibility);
+            });
+        }
+    });
+
+    return null;
+};

src/components/QuickEntry.tsx

@@ -1,5 +1,5 @@
-import { type Component, createSignal, createMemo, onCleanup, onMount } from "solid-js";
-import { store, currentTaskContext } from "@/store";
+import { type Component, createSignal, onCleanup, onMount } from "solid-js";
+import { store } from "@/store";
 import { Plus, X } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -7,37 +7,6 @@ import { QuickEntryForm } from "./QuickEntryForm";
 
 export const QuickEntry: Component = () => {
     const [isOpen, setIsOpen] = createSignal(false);
-    // Autofill tags based on context when opening
-    const initialTags = createMemo(() => {
-        if (!isOpen()) return [];
-
-        const tags: string[] = [];
-        const ctx = currentTaskContext();
-
-        if (store.isNotepadMode) {
-            // Not in a specific context, but in Notes mode. 
-            // We use global window variable set by Layout to get the active note id
-            const activeNoteId = (window as any)._activeNoteId;
-            if (activeNoteId) {
-                const note = store.notes.find(n => n.id === activeNoteId);
-                if (note && note.title) {
-                    const noteTagName = note.title.trim();
-                    if (noteTagName) tags.push(noteTagName);
-                }
-            }
-        } else if (typeof ctx === 'object') {
-            if ('bucketId' in ctx) {
-                // Bucket View: Autofill bucket name
-                const bucketName = ctx.name;
-                if (bucketName) tags.push(`@${bucketName}`);
-            } else if ('userId' in ctx) {
-                // Shared User View: Autofill user name (assuming name IS the tag for sharing)
-                const userName = ctx.name;
-                if (userName) tags.push(`@${userName}`);
-            }
-        }
-        return tags;
-    });
 
     const handleKeyDown = (e: KeyboardEvent) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -66,10 +35,10 @@ export const QuickEntry: Component = () => {
             </Button>
 
             {isOpen() && (
-                <div class="fixed inset-0 z-[100] flex items-end md:items-start justify-center md:pt-[15vh] px-0 md:px-4 pb-0 md:pb-4">
+                <div class="fixed inset-0 z-[100] flex items-start justify-center md:pt-[15vh] px-0 md:px-4 pb-0 md:pb-4">
                     <div class="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
 
-                    <div class="relative w-full max-w-xl max-h-[100vh] md:max-h-[80vh] bg-card border border-border rounded-t-2xl md:rounded-2xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4 md:zoom-in-95 duration-200 flex flex-col">
+                    <div class="relative w-full max-w-xl max-h-[100vh] md:max-h-[80vh] bg-card border border-border rounded-b-2xl md:rounded-2xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-4 md:slide-in-from-bottom-0 md:zoom-in-95 duration-200 flex flex-col">
                         <div class="absolute top-3 right-4 z-[101]">
                             <Button
                                 size="icon"
@@ -85,7 +54,6 @@ export const QuickEntry: Component = () => {
                             <QuickEntryForm
                                 onSuccess={() => setIsOpen(false)}
                                 autoFocus={true}
-                                initialTags={initialTags()}
                             />
                         </div>
                     </div>

src/components/QuickEntryForm.tsx

@@ -1,8 +1,9 @@
 import { type Component, createSignal, createEffect, onMount, For, Show, Suspense, lazy } from "solid-js";
-import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate } from "@/store";
-import { Search, Command, Clock, ArrowUpCircle, Copy, ChevronDown, Gauge } from "lucide-solid";
+import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate, currentTaskContext } from "@/store";
+import { Search, Command, Clock, ArrowUpCircle, Copy, ChevronDown, Gauge, RotateCcw } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import { TextField, TextFieldInput } from "@/components/ui/textfield";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { TagPicker } from "@/components/TagPicker";
@@ -21,19 +22,34 @@ interface QuickEntryFormProps {
     initialTags?: string[];
 }
 
+// Global state for QuickEntry persistence
+const [input, setInput] = createSignal("");
+const [priority, setPriority] = createSignal<string>("");
+const [urgency, setUrgency] = createSignal<string>("");
+const [tags, setTags] = createSignal<string[]>([]);
+const [description, setDescription] = createSignal("");
+const [size, setSize] = createSignal<string>("3");
+const [dateString, setDateString] = createSignal<string>("");
+const [showValidation, setShowValidation] = createSignal(false);
+
+let lastParsedTags: string[] = [];
+
+const resetQuickEntryState = () => {
+    setInput("");
+    setPriority("");
+    setUrgency("");
+    setTags([]);
+    setDescription("");
+    setSize("3");
+    setDateString("");
+    setShowValidation(false);
+    lastParsedTags = [];
+};
+
 export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
     const { resolvedTheme } = useTheme();
-    // Diff tracking for reactive tags
-    let lastParsedTags: string[] = [];
 
-    const [input, setInput] = createSignal(props.initialTitle || "");
-    const [priority, setPriority] = createSignal<string>("");
-    const [urgency, setUrgency] = createSignal<string>("");
-    const [tags, setTags] = createSignal<string[]>(props.initialTags || []);
-    const [description, setDescription] = createSignal("");
     const [editorInstance, setEditorInstance] = createSignal<any>(null);
-    const [size, setSize] = createSignal<string>("3");
-    const [dateString, setDateString] = createSignal<string>("");
 
     let inputRef: HTMLInputElement | undefined;
 
@@ -41,6 +57,9 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
         if (props.autoFocus) {
             setTimeout(() => inputRef?.focus(), 100);
         }
+        if (props.initialTitle && !input()) {
+            setInput(props.initialTitle);
+        }
     });
 
     // Reactive sync from props (handles context changes while open)
@@ -124,7 +143,12 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
 
     const parseAndAdd = async () => {
         let text = input();
-        if (!text || !priority() || !urgency()) return;
+        if (!text || !priority() || !urgency()) {
+            setShowValidation(true);
+            toast.error("Please fill in all required fields (Title, Priority, Urgency)");
+            if (!text) inputRef?.focus();
+            return;
+        }
 
         let finalPriority = parseInt(priority());
         let finalUrgency = parseInt(urgency());
@@ -187,6 +211,33 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
             finalDueDate = new Date(dateStr);
         }
 
+        // Apply context tags at the time of creation
+        const ctx = currentTaskContext();
+        if (store.isNotepadMode) {
+            const activeNoteId = (window as any)._activeNoteId;
+            if (activeNoteId) {
+                const note = store.notes.find(n => n.id === activeNoteId);
+                if (note && note.title) {
+                    const noteTagName = note.title.trim();
+                    if (noteTagName && !finalTags.includes(noteTagName)) finalTags.push(noteTagName);
+                }
+            }
+        } else if (typeof ctx === 'object') {
+            if ('bucketId' in ctx) {
+                const bucketName = ctx.name;
+                if (bucketName) {
+                    const tag = `@${bucketName}`;
+                    if (!finalTags.includes(tag)) finalTags.push(tag);
+                }
+            } else if ('userId' in ctx) {
+                const userName = ctx.name;
+                if (userName) {
+                    const tag = `@${userName}`;
+                    if (!finalTags.includes(tag)) finalTags.push(tag);
+                }
+            }
+        }
+
         addTask(title.replace(/\s+/g, " ").trim(), {
             priority: finalPriority,
             dueDate: finalDueDate || undefined,
@@ -195,14 +246,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
             size: parseInt(size())
         });
 
-        setInput("");
-        setPriority("");
-        setUrgency("");
-        setTags([]);
-        setDescription("");
-        setSize("3");
-        lastParsedTags = [];
-        setDateString("");
+        resetQuickEntryState();
 
         const instance = editorInstance();
         if (instance) instance.commands.setContent("");
@@ -232,20 +276,33 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
 
     return (
         <div class="flex flex-col h-full bg-card">
-            <div class="flex items-center px-4 py-3 border-b border-border sticky top-0 bg-card z-10">
-                <Search class="text-muted-foreground mr-3" size={20} />
-                <TextField class="flex-1">
-                    <TextFieldInput
-                        id="quick-entry-input"
-                        name="task-title"
-                        ref={inputRef}
-                        value={input()}
-                        onInput={(e) => setInput(e.currentTarget.value)}
-                        onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
-                        placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
-                        class="border-none shadow-none focus-visible:ring-0 text-lg"
-                    />
-                </TextField>
+            <div class={cn("flex flex-col border-b border-border sticky top-0 bg-card z-10 transition-colors", showValidation() && !input() && "bg-destructive/5")}>
+                <div class="flex items-center px-4 py-3">
+                    <Search class={cn("text-muted-foreground mr-3 transition-colors", showValidation() && !input() && "text-destructive")} size={20} />
+                    <TextField
+                        class="flex-1"
+                        validationState={showValidation() && !input() ? "invalid" : "valid"}
+                    >
+                        <TextFieldInput
+                            id="quick-entry-input"
+                            name="task-title"
+                            ref={inputRef}
+                            value={input()}
+                            onInput={(e) => setInput(e.currentTarget.value)}
+                            onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
+                            placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
+                            class="border-none shadow-none focus-visible:ring-0 text-lg p-0"
+                        />
+                    </TextField>
+                </div>
+                <Show when={showValidation() && !input()}>
+                    <div class="px-4 pb-2 -mt-1 flex items-center gap-1.5 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div class="w-1.5 h-1.5 rounded-full bg-destructive" />
+                        <span class="text-[0.625rem] font-bold uppercase tracking-widest text-destructive/80">
+                            Title is required to create a task
+                        </span>
+                    </div>
+                </Show>
             </div>
 
             <div class="flex-1 overflow-y-auto overscroll-contain">
@@ -269,11 +326,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                                     {props.item.rawValue.label}
                                 </SelectItem>
                             )}
+                            validationState={showValidation() && !priority() ? "invalid" : "valid"}
                         >
-                            <SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
+                            <SelectTrigger
+                                class={cn(
+                                    "w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
+                                    showValidation() && !priority() && "border-destructive/50 bg-destructive/5"
+                                )}
+                            >
                                 <div class="flex items-center gap-2 truncate">
-                                    <ArrowUpCircle size={14} class="text-primary shrink-0" />
-                                    <span class="text-sm font-medium truncate">
+                                    <ArrowUpCircle size={14} class={cn("text-primary shrink-0", showValidation() && !priority() && "text-destructive")} />
+                                    <span class={cn("text-sm font-medium truncate", showValidation() && !priority() && "text-destructive")}>
                                         {PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())}
                                     </span>
                                 </div>
@@ -328,11 +391,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                                     {props.item.rawValue.label}
                                 </SelectItem>
                             )}
+                            validationState={showValidation() && !urgency() ? "invalid" : "valid"}
                         >
-                            <SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
+                            <SelectTrigger
+                                class={cn(
+                                    "w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
+                                    showValidation() && !urgency() && "border-destructive/50 bg-destructive/5"
+                                )}
+                            >
                                 <div class="flex items-center gap-2 truncate">
-                                    <Clock size={14} class="text-primary shrink-0" />
-                                    <span class="text-sm font-medium truncate">
+                                    <Clock size={14} class={cn("text-primary shrink-0", showValidation() && !urgency() && "text-destructive")} />
+                                    <span class={cn("text-sm font-medium truncate", showValidation() && !urgency() && "text-destructive")}>
                                         {URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())}
                                     </span>
                                 </div>
@@ -345,7 +414,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                 <div class="flex flex-col md:flex-row items-stretch md:items-center px-4 py-3 gap-4 bg-muted/10 border-b border-border">
                     <div class="flex-1 flex flex-wrap gap-2 items-center">
                         <TagPicker selectedTags={tags()} onTagsChange={setTags} />
-                        <For each={tags()}>
+                        <For each={tags().filter(t => !t.endsWith("_favorite__"))}>
                             {(tag) => (
                                 <Badge
                                     variant="secondary"
@@ -420,6 +489,18 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                 </div>
 
                 <div class="flex items-center gap-2">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        class="h-9 w-9 text-muted-foreground hover:text-destructive"
+                        onClick={() => {
+                            resetQuickEntryState();
+                            editorInstance()?.commands.setContent("");
+                        }}
+                        title="Restart Quick Entry"
+                    >
+                        <RotateCcw size={16} />
+                    </Button>
                     <Show when={(store.templates || []).length > 0}>
                         <Popover>
                             <PopoverTrigger
@@ -457,7 +538,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
                         </Popover>
                     </Show>
 
-                    <Button size="sm" onClick={parseAndAdd} disabled={!input() || !priority() || !urgency()}>
+                    <Button size="sm" onClick={parseAndAdd}>
                         Create Task
                     </Button>
                 </div>

src/components/SlashMenu.tsx

@@ -1,17 +1,6 @@
 import { type Component, createSignal, For, createEffect } from "solid-js";
-import {
-    Heading1, Heading2, Heading3,
-    List, ListTodo, Type,
-    Code, Quote,
-    Image as ImageIcon, Minus,
-    Bold, Italic, Underline,
-    Grid3X3, Highlighter,
-    AlignLeft, AlignCenter, AlignRight,
-    Trash2
-} from "lucide-solid";
-import { cn, convertImageToWebpFile } from "@/lib/utils";
-import { activeTaskId, uploadTaskAttachment } from "@/store";
-import { toast } from "solid-sonner";
+import { Type, Code, Quote, Heading1, Heading2, Heading3, List, ListTodo, FileText, AppWindow, Minus, Grid3X3, Trash2 } from "lucide-solid";
+import { cn } from "@/lib/utils";
 
 export interface CommandItem {
     title: string;
@@ -31,33 +20,6 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
                 editor.chain().focus().deleteRange(range).setNode("paragraph").run();
             },
         },
-        {
-            title: "Bold",
-            description: "Strong text. (**text**)",
-            aliases: ["b", "strong"],
-            icon: Bold,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).toggleBold().run();
-            },
-        },
-        {
-            title: "Italic",
-            description: "Emphasized text. (*text*)",
-            aliases: ["i", "emphasis"],
-            icon: Italic,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).toggleItalic().run();
-            },
-        },
-        {
-            title: "Underline",
-            description: "Underlined text.",
-            aliases: ["u"],
-            icon: Underline,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).toggleUnderline().run();
-            },
-        },
         {
             title: "Heading 1",
             description: "Big section heading.",
@@ -118,51 +80,21 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
             },
         },
         {
-            title: "Image",
-            description: "Upload an image.",
-            icon: ImageIcon,
+            title: "Upload",
+            description: "Upload an image, video, or document.",
+            aliases: ["image", "video", "file", "upload", "pdf", "movie"],
+            icon: FileText,
             command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).run();
-                const taskId = activeTaskId();
-                if (!taskId) {
-                    toast.error("Cannot upload image outside of a task.");
-                    return;
-                }
-
-                const input = document.createElement("input");
-                input.type = "file";
-                input.accept = "image/*";
-                input.onchange = async () => {
-                    if (input.files?.length) {
-                        const originalFile = input.files[0];
-                        toast.promise(
-                            (async () => {
-                                const webpFile = await convertImageToWebpFile(originalFile);
-                                return uploadTaskAttachment(taskId, webpFile);
-                            })(),
-                            {
-                                loading: "Processing & uploading image...",
-                                success: (url) => {
-                                    // Insert image, then run enter to add a newline (paragraph) below it.
-                                    // Without this, the image stays selected and the next keypress deletes it.
-                                    editor.chain()
-                                        .focus()
-                                        .setImage({ src: url })
-                                        .run();
-
-                                    // Manually force a new paragraph at the end so the user can keep typing
-                                    editor.chain()
-                                        .focus('end')
-                                        .insertContent('<p></p>')
-                                        .run();
-                                    return "Image uploaded.";
-                                },
-                                error: "Failed to upload image."
-                            }
-                        );
-                    }
-                };
-                input.click();
+                editor.chain().focus().deleteRange(range).uploadMedia().run();
+            },
+        },
+        {
+            title: "Job File",
+            description: "Embed a job file from Prism.",
+            aliases: ["job", "jobfile", "prism"],
+            icon: AppWindow,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).insertFileViewer().run();
             },
         },
         {
@@ -182,87 +114,7 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
                 editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
             },
         },
-        {
-            title: "Highlight",
-            description: "Highlight selected text.",
-            aliases: ["mark"],
-            icon: Highlighter,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).toggleHighlight().run();
-            },
-        },
-        {
-            title: "Align Left",
-            description: "Align text to the left.",
-            icon: AlignLeft,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).setTextAlign("left").run();
-            },
-        },
-        {
-            title: "Align Center",
-            description: "Align text to the center.",
-            icon: AlignCenter,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).setTextAlign("center").run();
-            },
-        },
-        {
-            title: "Align Right",
-            description: "Align text to the right.",
-            icon: AlignRight,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).setTextAlign("right").run();
-            },
-        },
-        {
-            title: "Add Row Above",
-            description: "Insert a new row above the cursor.",
-            icon: Grid3X3,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).addRowBefore().run();
-            },
-        },
-        {
-            title: "Add Row Below",
-            description: "Insert a new row below the cursor.",
-            icon: Grid3X3,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).addRowAfter().run();
-            },
-        },
-        {
-            title: "Delete Row",
-            description: "Delete the current row.",
-            icon: Trash2,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).deleteRow().run();
-            },
-        },
-        {
-            title: "Add Column Left",
-            description: "Insert a new column to the left.",
-            icon: Grid3X3,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).addColumnBefore().run();
-            },
-        },
-        {
-            title: "Add Column Right",
-            description: "Insert a new column to the right.",
-            icon: Grid3X3,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).addColumnAfter().run();
-            },
-        },
-        {
-            title: "Delete Column",
-            description: "Delete the current column.",
-            icon: Trash2,
-            command: ({ editor, range }: { editor: any, range: any }) => {
-                editor.chain().focus().deleteRange(range).deleteColumn().run();
-            },
-        },
+
         {
             title: "Delete Table",
             description: "Delete the entire table.",

src/components/StatusCircle.tsx

@@ -1,4 +1,4 @@
-import { type Component } from "solid-js";
+import { type Component, For } from "solid-js";
 import { CheckCircle2 } from "lucide-solid";
 import { cn } from "@/lib/utils";
 
@@ -6,6 +6,7 @@ interface StatusCircleProps {
     status: number;
     size?: number;
     className?: string;
+    recurrenceProgress?: number | null;
 }
 
 export const StatusCircle: Component<StatusCircleProps> = (props) => {
@@ -25,10 +26,39 @@ export const StatusCircle: Component<StatusCircleProps> = (props) => {
         return circumference() * (1 - percentage);
     };
 
+    const dotCount = () => 12;
+    const dotRadius = () => Math.max(1.4, size() * 0.06);
+    const dotRingRadius = () => radius() - 1;
+    const filledDots = () => {
+        const progress = props.recurrenceProgress ?? 0;
+        return Math.floor(Math.max(0, Math.min(1, progress)) * dotCount());
+    };
+
     return (
         <div class={cn("relative flex items-center justify-center", props.className)} style={{ width: `${size()}px`, height: `${size()}px` }}>
             {props.status >= 10 ? (
-                <CheckCircle2 size={size()} class="text-green-500" />
+                props.recurrenceProgress != null ? (
+                    <svg width={size()} height={size()}>
+                        <For each={Array.from({ length: dotCount() })}>
+                            {(_, index) => {
+                                const angle = (index() / dotCount()) * Math.PI * 2 - Math.PI / 2;
+                                const cx = size() / 2 + Math.cos(angle) * dotRingRadius();
+                                const cy = size() / 2 + Math.sin(angle) * dotRingRadius();
+                                const isFilled = index() < filledDots();
+                                return (
+                                    <circle
+                                        cx={cx}
+                                        cy={cy}
+                                        r={dotRadius()}
+                                        class={isFilled ? "fill-green-500" : "fill-muted-foreground/30"}
+                                    />
+                                );
+                            }}
+                        </For>
+                    </svg>
+                ) : (
+                    <CheckCircle2 size={size()} class="text-green-500" />
+                )
             ) : (
                 // Progress Circle
                 <div class="relative group">

src/components/TableBubbleMenu.tsx

@@ -0,0 +1,183 @@
+import { type Component, createSignal, createEffect, For } from "solid-js";
+import {
+    Trash2,
+    Type
+} from "lucide-solid";
+import { cn } from "@/lib/utils";
+import type { Editor } from "@tiptap/core";
+
+// Custom Icons
+const AddRowAbove = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="3" y="8" width="12" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M9 2V6M7 4H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const AddRowBelow = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="3" y="3" width="12" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M9 12V16M7 14H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const AddColLeft = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="8" y="3" width="7" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M2 9H6M4 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const AddColRight = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="3" y="3" width="7" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M12 9H16M14 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const DeleteRow = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="2" y="7" width="14" height="4" rx="0.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M4 3L14 15M14 3L4 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const DeleteCol = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="7" y="2" width="4" height="14" rx="0.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M3 4L15 14M15 4L3 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const MergeCells = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="2" y="4" width="14" height="10" rx="1" stroke="currentColor" stroke-width="1.5" />
+        <path d="M6 9H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+const SplitCell = () => (
+    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="2" y="4" width="14" height="10" rx="1" stroke="currentColor" stroke-width="1.5" />
+        <path d="M9 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+);
+
+interface TableAction {
+    label: string;
+    icon: Component;
+    command: () => void;
+    iconClass?: string;
+}
+
+interface TableGroup {
+    name: string;
+    actions: TableAction[];
+}
+
+interface TableBubbleMenuProps {
+    editor: Editor;
+}
+
+export const TableBubbleMenu: Component<TableBubbleMenuProps> = (props) => {
+    const [isVisible, setIsVisible] = createSignal(false);
+
+    createEffect(() => {
+        const updateVisibility = () => {
+            const editor = props.editor;
+            if (!editor) return;
+            setIsVisible(editor.isActive("table"));
+        };
+
+        props.editor.on("selectionUpdate", updateVisibility);
+        props.editor.on("transaction", updateVisibility);
+
+        return () => {
+            props.editor.off("selectionUpdate", updateVisibility);
+            props.editor.off("transaction", updateVisibility);
+        };
+    });
+
+    const groups: TableGroup[] = [
+        {
+            name: "Rows",
+            actions: [
+                { label: "Insert Row Above", icon: AddRowAbove, command: () => props.editor.chain().focus().addRowBefore().run() },
+                { label: "Insert Row Below", icon: AddRowBelow, command: () => props.editor.chain().focus().addRowAfter().run() },
+                { label: "Delete Row", icon: DeleteRow, iconClass: "text-destructive", command: () => props.editor.chain().focus().deleteRow().run() },
+            ]
+        },
+        {
+            name: "Cols",
+            actions: [
+                { label: "Insert Column Left", icon: AddColLeft, command: () => props.editor.chain().focus().addColumnBefore().run() },
+                { label: "Insert Column Right", icon: AddColRight, command: () => props.editor.chain().focus().addColumnAfter().run() },
+                { label: "Delete Column", icon: DeleteCol, iconClass: "text-destructive", command: () => props.editor.chain().focus().deleteColumn().run() },
+            ]
+        },
+        {
+            name: "Cells",
+            actions: [
+                { label: "Merge Cells", icon: MergeCells, command: () => props.editor.chain().focus().mergeCells().run() },
+                { label: "Split Cell", icon: SplitCell, command: () => props.editor.chain().focus().splitCell().run() },
+                { label: "Header Row", icon: () => <Type size={18} />, command: () => props.editor.chain().focus().toggleHeaderRow().run() },
+            ]
+        },
+        {
+            name: "Table",
+            actions: [
+                { label: "Delete Table", icon: () => <Trash2 size={18} />, iconClass: "text-destructive", command: () => props.editor.chain().focus().deleteTable().run() },
+            ]
+        }
+    ];
+
+    return (
+        <div
+            class={cn(
+                "relative z-[150] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+                isVisible() ? "h-9 opacity-100" : "h-0 opacity-0 pointer-events-none"
+            )}
+            onMouseDown={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+        >
+            <div class="flex items-center justify-center h-full px-2 max-w-4xl mx-auto w-full">
+                <div class="flex items-center gap-1">
+                    <For each={groups}>
+                        {(group, groupIdx) => (
+                            <>
+                                <div class="flex items-center gap-0 px-0.5">
+                                    <For each={group.actions}>
+                                        {(action) => (
+                                            <button
+                                                type="button"
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    action.command();
+                                                }}
+                                                class={cn(
+                                                    "p-0.5 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground shrink-0 group relative",
+                                                    action.iconClass
+                                                )}
+                                            >
+                                                <action.icon />
+                                                <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-[10px] font-bold bg-foreground text-background rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-[200] shadow-lg">
+                                                    {action.label}
+                                                </span>
+                                            </button>
+                                        )}
+                                    </For>
+                                </div>
+                                {groupIdx() < groups.length - 1 && (
+                                    <div class="w-[1px] h-4 bg-border/50 mx-1" />
+                                )}
+                            </>
+                        )}
+                    </For>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/TagPicker.tsx

@@ -23,9 +23,11 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
     };
 
     const allTagNames = () => {
-        const definedTags = store.tagDefinitions.map(d => d.name);
+        const definedTags = store.tagDefinitions.filter(d => !d.name.endsWith("_favorite__")).map(d => d.name);
         const bucketTags = store.buckets.map(b => `@${b.name}`);
-        const noteTags = store.notes.map(n => `#${n.title}`);
+        const noteTags = store.notes
+            .filter(n => !(n.tags || []).some(t => t.startsWith("child-of-")))
+            .map(n => `#${n.title}`);
         return [...new Set([...definedTags, ...bucketTags, ...noteTags])].sort();
     };
 

src/components/TaskCard.tsx

@@ -1,12 +1,13 @@
 import { type Component, createMemo, For, Show } from "solid-js";
-import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext, now } from "@/store";
+import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask, currentTaskContext, now, getFavoriteTag } from "@/store";
 import { cn } from "@/lib/utils";
-import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
+import { Clock, ArrowUpCircle, Copy, Users2, Star } from "lucide-solid";
 import { Badge } from "@/components/ui/badge";
 import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { getStatusOptionsForTask } from "@/lib/constants";
+import { getRecurrenceProgress } from "@/lib/recurrence";
 import { StatusCircle } from "./StatusCircle";
 
 export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props) => {
@@ -35,10 +36,10 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
             // We are in a bucket view. Hide the tag that matches this bucket's name.
             // Buckets are now tagged with '@' + name.
             const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
-            return tags.filter(t => t.toLowerCase() !== bucketTagName);
+            return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
         }
 
-        return tags;
+        return tags.filter(t => !t.endsWith("_favorite__"));
     });
 
     const isDueWithin12Hours = createMemo(() => {
@@ -54,6 +55,10 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
     });
 
     const statusOptions = createMemo(() => getStatusOptionsForTask(props.task.recurrence));
+    const recurrenceProgress = createMemo(() => {
+        if (props.task.status !== 10) return null;
+        return getRecurrenceProgress(props.task.recurrence, props.task.updated, now());
+    });
 
     return (
         <div
@@ -93,7 +98,7 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                             updateTask(props.task.id, { status: 10 });
                         }}
                     >
-                        <StatusCircle status={props.task.status ?? 0} size={26} />
+                        <StatusCircle status={props.task.status ?? 0} size={26} recurrenceProgress={recurrenceProgress()} />
                     </SelectTrigger>
                     <SelectContent />
                 </Select>
@@ -218,9 +223,9 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                 </div>
             </div>
 
-            <div class="ml-2 sm:ml-4 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+            <div class="ml-2 sm:ml-4 shrink-0 flex items-center gap-1">
                 <button
-                    class="p-1.5 hover:bg-muted rounded-full transition-colors text-muted-foreground hover:text-primary"
+                    class="p-1.5 hover:bg-muted rounded-full transition-all text-muted-foreground hover:text-primary opacity-0 group-hover:opacity-100"
                     onClick={(e) => {
                         e.stopPropagation();
                         copyTask(props.task.id);
@@ -229,6 +234,25 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                 >
                     <Copy size={16} />
                 </button>
+                <button
+                    class={cn(
+                        "p-1.5 rounded-full transition-all",
+                        props.task.tags?.includes(getFavoriteTag())
+                            ? "text-amber-500 bg-amber-500/10 hover:bg-amber-500/20 opacity-100"
+                            : "text-muted-foreground hover:text-amber-500 hover:bg-muted opacity-0 group-hover:opacity-100"
+                    )}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        const favTag = getFavoriteTag();
+                        const currentTags = props.task.tags || [];
+                        const isFav = currentTags.includes(favTag);
+                        const newTags = isFav ? currentTags.filter(t => t !== favTag) : [...currentTags, favTag];
+                        updateTask(props.task.id, { tags: newTags });
+                    }}
+                    title="Toggle Favorite"
+                >
+                    <Star size={16} class={cn(props.task.tags?.includes(getFavoriteTag()) && "fill-amber-500")} />
+                </button>
             </div>
         </div>
     );

src/components/TaskDetail.tsx

@@ -1,9 +1,9 @@
-import { type Component, createEffect, createSignal, For, createMemo } from "solid-js";
+import { type Component, createEffect, createSignal, For, createMemo, onCleanup, Show } from "solid-js";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext } from "@/store";
+import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } from "@/store";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings } from "lucide-solid";
+import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings, Star, FileText } from "lucide-solid";
 import { StatusCircle } from "./StatusCircle";
 import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
 import { Button } from "./ui/button";
@@ -17,6 +17,9 @@ import { lazy, Suspense } from "solid-js";
 import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
 import { pb } from "@/lib/pocketbase";
+import { getRecurrenceProgress } from "@/lib/recurrence";
+import { TextBubbleMenu } from "@/components/TextBubbleMenu";
+import { TableBubbleMenu } from "@/components/TableBubbleMenu";
 
 const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
 
@@ -110,9 +113,31 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
         }, 1000);
     };
 
-    // Removed onCleanup to avoid lockup
+    // Sync activeTaskId for slash commands and run cleanup on unmount/change
+    createEffect(() => {
+        const currentTaskId = props.task.id;
 
+        onCleanup(() => {
+            // 1. Immediately flush any pending debounce updates for the outgoing task
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+                if (pendingContent !== null) {
+                    updateTask(currentTaskId, { content: pendingContent });
+                }
+            }
 
+            // 2. Clear pending state
+            debounceTimer = undefined;
+            pendingContent = null;
+
+            // 3. Trigger cleanup after a tiny delay so the updateTask above processes first
+            if (currentTaskId) {
+                setTimeout(() => {
+                    cleanupTaskAttachments(currentTaskId).catch(console.error);
+                }, 100);
+            }
+        });
+    });
     const updateTitle = (val: string) => {
         setTitle(val);
         updateTask(props.task.id, { title: val });
@@ -179,13 +204,17 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
             // We are in a bucket view. Hide the tag that matches this bucket's name.
             // Buckets are now tagged with '@' + name.
             const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
-            return tags.filter(t => t.toLowerCase() !== bucketTagName);
+            return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
         }
 
-        return tags;
+        return tags.filter(t => !t.endsWith("_favorite__"));
     });
 
     const statusOptions = createMemo(() => getStatusOptionsForTask(props.task.recurrence));
+    const recurrenceProgress = createMemo(() => {
+        if (props.task.status !== 10) return null;
+        return getRecurrenceProgress(props.task.recurrence, props.task.updated, now());
+    });
 
     return (
         <Sheet open={props.isOpen} onOpenChange={(open) => {
@@ -206,10 +235,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                         e.preventDefault();
                     }
                 }}
-                class="w-full sm:max-w-2xl px-0 sm:px-0 flex flex-col h-full bg-background border-l border-border shadow-2xl"
+                class="w-full sm:max-w-2xl p-0 gap-0 flex flex-col h-full bg-background border-l border-border shadow-2xl"
             >
                 {/* Header Area */}
-                <div class="px-6 pt-6 pb-2 shrink-0">
+                <div class="px-6 pt-6 pb-0 shrink-0">
                     <div class="flex items-start gap-4">
                         <div class="shrink-0 mt-0.5">
                             <Select<any>
@@ -229,7 +258,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                         updateStatus("10");
                                     }}
                                 >
-                                    <StatusCircle status={props.task.status ?? 0} size={28} />
+                                    <StatusCircle status={props.task.status ?? 0} size={28} recurrenceProgress={recurrenceProgress()} />
                                 </SelectTrigger>
                                 <SelectContent />
                             </Select>
@@ -339,6 +368,26 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             </Select>
                         </div>
 
+                        {/* Favorite */}
+                        <div class="flex items-center gap-1 group shrink-0">
+                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline"></span>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class={cn("h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider transition-colors shrink-0", props.task.tags?.includes(getFavoriteTag()) ? "text-amber-500 hover:bg-amber-500/10" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground")}
+                                onClick={() => {
+                                    const favTag = getFavoriteTag();
+                                    const currentTags = props.task.tags || [];
+                                    const isFav = currentTags.includes(favTag);
+                                    const newTags = isFav ? currentTags.filter(t => t !== favTag) : [...currentTags, favTag];
+                                    updateTags(newTags);
+                                }}
+                            >
+                                <Star size={14} class={cn("opacity-70 group-hover:opacity-100 transition-opacity shrink-0", props.task.tags?.includes(getFavoriteTag()) && "fill-amber-500")} />
+                                <span class="hidden sm:inline sm:ml-1.5">{props.task.tags?.includes(getFavoriteTag()) ? "Starred" : "Star"}</span>
+                            </Button>
+                        </div>
+
                         {/* Commands Shortcut */}
                         <div class="flex items-center gap-1 shrink-0">
                             <Button
@@ -356,6 +405,24 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                 <span class="hidden sm:inline">Commands</span>
                             </Button>
                         </div>
+
+                        {/* Unified Media Upload Shortcut */}
+                        <div class="flex items-center gap-1 shrink-0">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+                                onClick={() => {
+                                    const instance = editorInstance();
+                                    if (instance) {
+                                        instance.chain().focus().uploadMedia().run();
+                                    }
+                                }}
+                            >
+                                <FileText size={14} class="opacity-70" />
+                                <span class="hidden sm:inline">Upload</span>
+                            </Button>
+                        </div>
                     </div>
 
                     {/* Metadata Row (Dates/Timestamps) */}
@@ -392,10 +459,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     </div>
 
                     <div class="h-px w-full bg-border mt-5" />
+                    
+                    <Show when={editorInstance()}>
+                        {(editor: any) => (
+                            <div class="flex flex-col pt-1 pb-1 relative z-30">
+                                <TextBubbleMenu editor={editor()} />
+                                <TableBubbleMenu editor={editor()} />
+                            </div>
+                        )}
+                    </Show>
                 </div>
 
                 {/* Content Area */}
-                <div class="flex-1 overflow-y-auto px-6 py-4 pb-20 flex flex-col gap-6">
+                <div class="flex-1 overflow-y-auto px-6 pb-20 pt-4 flex flex-col">
                     <Suspense fallback={<div class="h-32 animate-pulse bg-muted/20 rounded-lg" />}>
                         <TaskEditor
                             content={props.task.content}
@@ -616,7 +692,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             </PopoverContent>
                         </Popover>
 
-                        {/* Close button (Mobile only) */}
+
                         <Button
                             variant="ghost"
                             size="sm"

src/components/TaskEditor.tsx

@@ -4,11 +4,14 @@ import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import TaskList from "@tiptap/extension-task-list";
 import { CustomTaskItem } from "./CustomTaskItem";
-import Image from "@tiptap/extension-image";
+import { CustomImage as Image } from "@/lib/extensions/image";
 import Underline from "@tiptap/extension-underline";
 import { X } from "lucide-solid";
 import { cn } from "@/lib/utils";
-import { store } from "@/store";
+import { store, activeTaskId, activeNoteId, uploadTaskAttachment, uploadNoteAttachment } from "@/store";
+import { convertImageToWebpFile } from "@/lib/utils";
+import { toast } from "solid-sonner";
+import type { Editor } from "@tiptap/core";
 
 import { SlashCommands } from "@/lib/slash-command";
 import { suggestion } from "@/lib/slash-renderer";
@@ -26,6 +29,10 @@ import { Typography } from "@tiptap/extension-typography";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
 import { Mention } from "@tiptap/extension-mention";
 import { userSuggestion, noteSuggestion } from "@/lib/mention-suggestion";
+import { FileViewer } from "@/lib/extensions/file-viewer";
+import { Video } from "@/lib/extensions/video";
+import { FileAttachment } from "@/lib/extensions/file-attachment";
+import { MediaUpload } from "@/lib/extensions/media-upload";
 
 interface TaskEditorProps {
     content?: string;
@@ -51,6 +58,51 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
         setZoomOffset({ x: 0, y: 0 });
     };
 
+    const handleFileUploads = async (editor: Editor, files: File[]) => {
+        const taskId = activeTaskId();
+        const noteId = activeNoteId();
+
+        if (!taskId && !noteId) {
+            toast.error("Cannot upload files outside of a task or note.");
+            return;
+        }
+
+        for (const file of files) {
+            const isImage = file.type.startsWith('image/');
+            const isVideo = file.type.startsWith('video/');
+
+            toast.promise(
+                (async () => {
+                    let fileToUpload = file;
+                    if (isImage) {
+                        fileToUpload = await convertImageToWebpFile(file);
+                    }
+
+                    if (taskId) {
+                        return uploadTaskAttachment(taskId, fileToUpload);
+                    } else {
+                        return uploadNoteAttachment(noteId!, fileToUpload);
+                    }
+                })(),
+                {
+                    loading: `Uploading ${file.name}...`,
+                    success: ({ url, filename }) => {
+                        if (isImage) {
+                            // @ts-ignore
+                            editor.chain().focus().setImage({ src: url, filename }).run();
+                        } else if (isVideo) {
+                            editor.chain().focus().setVideo({ src: url, filename }).run();
+                        } else {
+                            editor.chain().focus().insertFileAttachment({ src: url, filename, filesize: file.size.toString() }).run();
+                        }
+                        return `${file.name} uploaded.`;
+                    },
+                    error: `Failed to upload ${file.name}.`
+                }
+            );
+        }
+    };
+
     const editor = createTiptapEditor(() => ({
         element: editorRef!,
         extensions: [
@@ -159,6 +211,10 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
                 color: "var(--primary)",
                 width: 2,
             }),
+            FileViewer,
+            Video,
+            FileAttachment,
+            MediaUpload,
         ],
         // Use untrack so the editor doesn't re-initialize when props.content changes
         content: untrack(() => props.content) || "",
@@ -167,6 +223,27 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
             props.onUpdate(editor.getHTML());
         },
         editorProps: {
+            handlePaste: (_view, event) => {
+                const items = Array.from(event.clipboardData?.items || []);
+                const files = items
+                    .map(item => item.getAsFile())
+                    .filter((file): file is File => file !== null);
+
+                if (files.length > 0) {
+                    event.preventDefault();
+                    handleFileUploads(editor()!, files);
+                    return true;
+                }
+                return false;
+            },
+            handleDrop: (_view, event, _slice, moved) => {
+                if (!moved && event.dataTransfer?.files?.length) {
+                    event.preventDefault();
+                    handleFileUploads(editor()!, Array.from(event.dataTransfer.files));
+                    return true;
+                }
+                return false;
+            },
             attributes: {
                 class: cn(
                     "prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[150px]",
@@ -189,6 +266,7 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
                     "[&_.tiptap-task-content>p]:min-h-[1.5rem] [&_.tiptap-task-content>p]:m-0 [&_.tiptap-task-content>p]:w-full",
                     "[&_.tiptap-task-content>p:empty]:after:content-['\\200B'] [&_.tiptap-task-content>p:empty]:after:inline-block",
                     "[&_.tiptap-task-content>p>br]:after:content-['\\200B'] [&_.tiptap-task-content>p>br]:after:inline-block", // if tiptap adds br
+                    "[&>.file-viewer-wrapper:first-child]:mt-0 [&>.file-viewer-wrapper:first-child]:border-t-0 [&>.file-viewer-wrapper:first-child]:border-x-0 [&>.file-viewer-wrapper:first-child]:rounded-none [&>.file-viewer-wrapper:first-child]:bg-transparent [&>.file-viewer-wrapper:first-child]:h-[80vh]",
                     props.class
                 ),
             },
@@ -239,33 +317,35 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
 
     // Handle full screen images as before
     return (
-        <div class="relative w-full flex flex-col flex-1">
-            <div
-                class="absolute -top-6 -left-4 -right-4 h-8 cursor-pointer group flex items-center justify-center z-10"
-                onClick={() => {
-                    const e = editor();
-                    if (!e) return;
-                    e.chain().insertContentAt(0, '<p></p>').focus('start').run();
-                }}
-                title="Add empty line at the top"
-            >
-                <span class="opacity-0 group-hover:opacity-100 text-[10px] uppercase font-bold text-muted-foreground tracking-widest transition-opacity mt-1">
-                    Click to insert newline above
-                </span>
+        <div class="w-full h-full flex flex-col">
+            <div class="w-full flex-1 flex flex-col">
+                <div
+                    class="w-full h-8 cursor-pointer group flex items-center justify-center shrink-0 transition-all"
+                    onClick={() => {
+                        const e = editor();
+                        if (!e) return;
+                        e.chain().insertContentAt(0, '<p></p>').focus('start').run();
+                    }}
+                    title="Add empty line at the top"
+                >
+                    <span class="opacity-0 group-hover:opacity-100 text-[10px] uppercase font-bold text-muted-foreground tracking-widest transition-opacity">
+                        Click to insert newline above
+                    </span>
+                </div>
+                <div
+                    ref={editorRef}
+                    class="w-full flex-1 cursor-text"
+                    onClick={(e) => {
+                        const target = e.target as HTMLElement;
+                        if (target.tagName.toLowerCase() === 'img') {
+                            setFullscreenImage((target as HTMLImageElement).src);
+                        } else if (e.target === editorRef) {
+                            // Focus end if clicking on padding below content
+                            editor()?.chain().focus().run();
+                        }
+                    }}
+                />
             </div>
-            <div
-                ref={editorRef}
-                class="w-full flex-1 cursor-text"
-                onClick={(e) => {
-                    const target = e.target as HTMLElement;
-                    if (target.tagName.toLowerCase() === 'img') {
-                        setFullscreenImage((target as HTMLImageElement).src);
-                    } else if (e.target === editorRef) {
-                        // Focus end if clicking on padding below content
-                        editor()?.chain().focus().run();
-                    }
-                }}
-            />
 
             {/* Note Preview Popover */}
             <Show when={previewNote() && store.notes.find(n => n.id === previewNote()!.noteId)}>

src/components/TextBubbleMenu.tsx

@@ -0,0 +1,206 @@
+import { type Component, createSignal, createEffect, For } from "solid-js";
+import {
+    Bold,
+    Italic,
+    Underline,
+    Highlighter,
+    AlignLeft,
+    AlignCenter,
+    AlignRight,
+    Heading1,
+    Heading2,
+    Heading3,
+    Heading,
+    Eraser,
+    ListTodo,
+    Grid3X3,
+    AlignJustify
+} from "lucide-solid";
+import { cn } from "@/lib/utils";
+import type { Editor } from "@tiptap/core";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+interface GenericAction {
+    label: string;
+    icon: Component;
+    isActive?: () => boolean;
+    command: () => void;
+    iconClass?: string;
+}
+
+interface FormatGroup {
+    name: string;
+    actions: GenericAction[];
+    collapseOnMobile?: boolean;
+    mobileIcon?: Component;
+}
+
+export const TextBubbleMenu: Component<{ editor: Editor }> = (props) => {
+    // Track state of active styles so we can highlight the buttons
+    const [activeFormats, setActiveFormats] = createSignal<Record<string, boolean>>({});
+
+    createEffect(() => {
+        const updateState = () => {
+            const editor = props.editor;
+            if (!editor) return;
+
+            setActiveFormats({
+                bold: editor.isActive('bold'),
+                italic: editor.isActive('italic'),
+                underline: editor.isActive('underline'),
+                highlight: editor.isActive('highlight'),
+                alignLeft: editor.isActive({ textAlign: 'left' }),
+                alignCenter: editor.isActive({ textAlign: 'center' }),
+                alignRight: editor.isActive({ textAlign: 'right' }),
+                h1: editor.isActive('heading', { level: 1 }),
+                h2: editor.isActive('heading', { level: 2 }),
+                h3: editor.isActive('heading', { level: 3 }),
+                checklist: editor.isActive('taskList'),
+                table: editor.isActive('table'),
+            });
+        };
+
+        props.editor.on("selectionUpdate", updateState);
+        props.editor.on("transaction", updateState);
+
+        return () => {
+            props.editor.off("selectionUpdate", updateState);
+            props.editor.off("transaction", updateState);
+        };
+    });
+
+    const groups: FormatGroup[] = [
+        {
+            name: "Style",
+            actions: [
+                { label: "Bold", icon: () => <Bold size={16} />, isActive: () => activeFormats().bold, command: () => props.editor.chain().focus().toggleBold().run() },
+                { label: "Italic", icon: () => <Italic size={16} />, isActive: () => activeFormats().italic, command: () => props.editor.chain().focus().toggleItalic().run() },
+                { label: "Underline", icon: () => <Underline size={16} />, isActive: () => activeFormats().underline, command: () => props.editor.chain().focus().toggleUnderline().run() },
+                { label: "Highlight", icon: () => <Highlighter size={16} />, isActive: () => activeFormats().highlight, command: () => props.editor.chain().focus().toggleHighlight().run() },
+            ]
+        },
+        {
+            name: "Headings",
+            collapseOnMobile: true,
+            mobileIcon: () => <Heading size={16} />,
+            actions: [
+                { label: "Heading 1", icon: () => <Heading1 size={16} />, isActive: () => activeFormats().h1, command: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run() },
+                { label: "Heading 2", icon: () => <Heading2 size={16} />, isActive: () => activeFormats().h2, command: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run() },
+                { label: "Heading 3", icon: () => <Heading3 size={16} />, isActive: () => activeFormats().h3, command: () => props.editor.chain().focus().toggleHeading({ level: 3 }).run() },
+            ]
+        },
+        {
+            name: "Alignment",
+            collapseOnMobile: true,
+            mobileIcon: () => <AlignJustify size={16} />,
+            actions: [
+                { label: "Align Left", icon: () => <AlignLeft size={16} />, isActive: () => activeFormats().alignLeft, command: () => props.editor.chain().focus().setTextAlign('left').run() },
+                { label: "Align Center", icon: () => <AlignCenter size={16} />, isActive: () => activeFormats().alignCenter, command: () => props.editor.chain().focus().setTextAlign('center').run() },
+                { label: "Align Right", icon: () => <AlignRight size={16} />, isActive: () => activeFormats().alignRight, command: () => props.editor.chain().focus().setTextAlign('right').run() },
+            ]
+        },
+        {
+            name: "Blocks",
+            actions: [
+                { label: "Checklist", icon: () => <ListTodo size={16} />, isActive: () => activeFormats().checklist, command: () => props.editor.chain().focus().toggleTaskList().run() },
+                { label: "Table", icon: () => <Grid3X3 size={16} />, isActive: () => activeFormats().table, command: () => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+            ]
+        },
+        {
+            name: "Clear",
+            actions: [
+                { label: "Clear Formatting", icon: () => <Eraser size={16} />, command: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run() },
+            ]
+        }
+    ];
+
+    return (
+        <div
+            class={cn(
+                "relative z-[140] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col h-9 opacity-100"
+            )}
+            onMouseDown={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+        >
+            <div class="flex items-center justify-center h-full px-2 max-w-4xl mx-auto w-full">
+                <div class="flex items-center gap-1">
+                    <For each={groups}>
+                        {(group, groupIdx) => (
+                            <>
+                                <div class={cn("flex items-center gap-0 px-0.5", group.collapseOnMobile ? "hidden sm:flex" : "")}>
+                                    <For each={group.actions}>
+                                        {(action) => (
+                                            <button
+                                                type="button"
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    action.command();
+                                                }}
+                                                class={cn(
+                                                    "p-1.5 rounded-md transition-colors group relative shrink-0",
+                                                    action.isActive?.() 
+                                                        ? "bg-primary/20 text-primary" 
+                                                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                                                    action.iconClass
+                                                )}
+                                                title={action.label}
+                                            >
+                                                <action.icon />
+                                                <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-[10px] font-bold bg-foreground text-background rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-[200] shadow-lg">
+                                                    {action.label}
+                                                </span>
+                                            </button>
+                                        )}
+                                    </For>
+                                </div>
+
+                                {group.collapseOnMobile && group.mobileIcon && (
+                                    <div class="flex sm:hidden items-center gap-0 px-0.5">
+                                        <Popover>
+                                            <PopoverTrigger class={cn(
+                                                "p-1.5 rounded-md transition-colors group relative shrink-0 text-muted-foreground hover:bg-muted hover:text-foreground",
+                                                group.actions.some(a => a.isActive?.()) && "bg-primary/20 text-primary"
+                                            )}>
+                                                <group.mobileIcon />
+                                            </PopoverTrigger>
+                                            <PopoverContent class="w-auto p-1 flex items-center gap-1 shadow-xl" align="center">
+                                                <For each={group.actions}>
+                                                    {(action) => (
+                                                        <button
+                                                            type="button"
+                                                            onClick={(e) => {
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                                action.command();
+                                                            }}
+                                                            class={cn(
+                                                                "p-1.5 rounded-md transition-colors relative shrink-0",
+                                                                action.isActive?.() 
+                                                                    ? "bg-primary text-primary-foreground" 
+                                                                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                                                                action.iconClass
+                                                            )}
+                                                            title={action.label}
+                                                        >
+                                                            <action.icon />
+                                                        </button>
+                                                    )}
+                                                </For>
+                                            </PopoverContent>
+                                        </Popover>
+                                    </div>
+                                )}
+                                {groupIdx() < groups.length - 1 && (
+                                    <div class="w-[1px] h-4 bg-border/50 mx-1" />
+                                )}
+                            </>
+                        )}
+                    </For>
+                </div>
+            </div>
+        </div>
+    );
+};

src/index.css

@@ -78,15 +78,15 @@
     }
   }
 
-  --animate-task-enter: task-enter 0.25s ease-out backwards;
+  --animate-progress-fast: loading-progress 2s infinite linear;
 
-  @keyframes task-enter {
+  @keyframes loading-progress {
     0% {
-      opacity: 0;
+      transform: translateX(-100%);
     }
 
     100% {
-      opacity: 1;
+      transform: translateX(300%);
     }
   }
 }
@@ -184,4 +184,21 @@
 .fade-enter,
 .fade-exit-to {
   opacity: 0;
+}
+
+/* --- Tiptap Table Selection --- */
+.ProseMirror td.selectedCell,
+.ProseMirror th.selectedCell {
+  background: color-mix(in srgb, var(--primary), transparent 90%);
+  position: relative;
+}
+
+.ProseMirror td.selectedCell::after,
+.ProseMirror th.selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border: 2px solid var(--primary);
+  pointer-events: none;
+  z-index: 10;
 }

src/index.tsx

@@ -3,12 +3,14 @@ import './index.css'
 import App from './App.tsx'
 import { ThemeProvider } from './components/ThemeProvider'
 import { Toaster } from './components/ui/sonner'
+import { PwaUpdater } from './components/PwaUpdater'
 
 const root = document.getElementById('root')
 
 render(() => {
     return (
         <ThemeProvider>
+            <PwaUpdater />
             <App />
             <Toaster />
         </ThemeProvider>

src/lib/extensions/file-attachment.ts

@@ -0,0 +1,237 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface FileAttachmentOptions {
+    HTMLAttributes: Record<string, any>;
+}
+
+export const FileAttachment = Node.create<FileAttachmentOptions>({
+    name: 'fileAttachment',
+
+    group: 'block',
+    
+    selectable: true,
+    draggable: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                class: 'file-attachment-node w-full max-w-sm rounded-lg border border-border bg-muted/30 hover:bg-muted/50 transition-colors my-4 overflow-hidden relative group cursor-pointer shadow-sm',
+            },
+        };
+    },
+
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-src'),
+                renderHTML: attributes => {
+                    if (!attributes.src) return {};
+                    return { 'data-src': attributes.src };
+                },
+            },
+            filename: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-filename'),
+                renderHTML: attributes => {
+                    if (!attributes.filename) return {};
+                    return { 'data-filename': attributes.filename };
+                },
+            },
+            filesize: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-filesize'),
+                renderHTML: attributes => {
+                    if (!attributes.filesize) return {};
+                    return { 'data-filesize': attributes.filesize };
+                },
+            }
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="file-attachment"]',
+            },
+            {
+                tag: 'a.file-attachment-link',
+            }
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        const filename = HTMLAttributes.filename || '';
+        const isPdf = filename.toLowerCase().endsWith('.pdf');
+
+        if (isPdf) {
+            return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 
+                'data-type': 'file-attachment', 
+                class: 'file-attachment-wrapper relative w-full my-4 rounded-xl overflow-hidden border border-border flex min-h-[500px] bg-muted/20 group' 
+            }),
+                ['iframe', { src: HTMLAttributes.src, class: 'w-full h-full border-0 absolute inset-0' }]
+            ];
+        }
+
+        return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 
+            'data-type': 'file-attachment', 
+        }),
+            ['a', { href: HTMLAttributes.src, target: '_blank', rel: 'noopener noreferrer', class: 'file-attachment-link flex items-center p-3 gap-3 w-full h-full' },
+                ['div', { class: 'flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary' }, 
+                    // SVG for FileText
+                    ['svg', { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' },
+                        ['path', { d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' }],
+                        ['path', { d: 'M14 2v4a2 2 0 0 0 2 2h4' }],
+                        ['path', { d: 'M10 9H8' }],
+                        ['path', { d: 'M16 13H8' }],
+                        ['path', { d: 'M16 17H8' }]
+                    ]
+                ],
+                ['div', { class: 'flex flex-col overflow-hidden w-full text-left' },
+                    ['span', { class: 'text-sm font-medium truncate w-full text-foreground' }, HTMLAttributes.filename || 'Attachment'],
+                    ['span', { class: 'text-xs text-muted-foreground mt-0.5' }, 'View File']
+                ]
+            ]
+        ];
+    },
+
+    addKeyboardShortcuts() {
+        return {
+            Backspace: () => {
+                const { selection } = this.editor.state;
+                if (!selection.empty) {
+                    const selectedNode = this.editor.state.doc.nodeAt(selection.from);
+                    if (selectedNode?.type.name === this.name) {
+                        return true; // Prevent default deletion
+                    }
+                }
+                return false;
+            },
+            Delete: () => {
+                const { selection } = this.editor.state;
+                if (!selection.empty) {
+                    const selectedNode = this.editor.state.doc.nodeAt(selection.from);
+                    if (selectedNode?.type.name === this.name) {
+                        return true; // Prevent default deletion
+                    }
+                }
+                return false;
+            },
+        };
+    },
+
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const filename = node.attrs.filename || '';
+            const isPdf = filename.toLowerCase().endsWith('.pdf');
+            const isTxt = filename.toLowerCase().endsWith('.txt');
+            const isFramable = isPdf || isTxt;
+
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('data-type', 'file-attachment');
+            wrapper.setAttribute('data-src', node.attrs.src);
+            wrapper.setAttribute('data-filename', node.attrs.filename);
+            wrapper.setAttribute('data-filesize', node.attrs.filesize);
+
+            if (isFramable) {
+                // Framed mode matching FileViewer
+                wrapper.classList.add('file-viewer-wrapper', 'relative', 'w-full', 'my-4', 'rounded-xl', 'overflow-hidden', 'border', 'border-border', 'flex', 'bg-muted/10', 'group');
+                wrapper.style.minHeight = '500px';
+
+                const iframe = document.createElement('iframe');
+                iframe.src = node.attrs.src;
+                iframe.classList.add('w-full', 'h-full', 'border-0', 'absolute', 'inset-0');
+                
+                wrapper.appendChild(iframe);
+            } else {
+                // Card mode
+                wrapper.classList.add('file-attachment-node', 'w-full', 'max-w-sm', 'rounded-lg', 'border', 'border-border', 'bg-muted/30', 'hover:bg-muted/50', 'transition-colors', 'my-4', 'overflow-hidden', 'relative', 'group', 'cursor-pointer', 'shadow-sm');
+                
+                const anchor = document.createElement('a');
+                anchor.href = node.attrs.src || '#';
+                anchor.target = '_blank';
+                anchor.rel = 'noopener noreferrer';
+                anchor.classList.add('flex', 'items-center', 'p-3', 'gap-3', 'w-full', 'h-full', 'no-underline');
+
+                const iconContainer = document.createElement('div');
+                iconContainer.classList.add('flex-shrink-0', 'flex', 'items-center', 'justify-center', 'w-10', 'h-10', 'rounded-md', 'bg-primary/10', 'text-primary');
+                iconContainer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>';
+
+                const textContainer = document.createElement('div');
+                textContainer.classList.add('flex', 'flex-col', 'overflow-hidden', 'w-full', 'text-left');
+                
+                const filenameSpan = document.createElement('span');
+                filenameSpan.classList.add('text-sm', 'font-medium', 'truncate', 'w-full', 'text-foreground');
+                filenameSpan.innerText = node.attrs.filename || 'Attachment';
+                
+                const subTextSpan = document.createElement('span');
+                subTextSpan.classList.add('text-xs', 'text-muted-foreground', 'mt-0.5');
+                if (node.attrs.filesize) {
+                    const mb = (parseInt(node.attrs.filesize) / (1024 * 1024)).toFixed(2);
+                    subTextSpan.innerText = `${mb} MB  •  View File`;
+                } else {
+                    subTextSpan.innerText = `View File`;
+                }
+
+                textContainer.appendChild(filenameSpan);
+                textContainer.appendChild(subTextSpan);
+                anchor.appendChild(iconContainer);
+                anchor.appendChild(textContainer);
+                wrapper.appendChild(anchor);
+            }
+
+            // Delete button overlay
+            const overlay = document.createElement('div');
+            overlay.classList.add('absolute', 'top-1.5', 'left-1.5', 'flex', '[@media(hover:hover)]:hidden', '[@media(hover:hover)]:group-hover:flex', 'bg-background/90', 'backdrop-blur-sm', 'p-1', 'rounded-lg', 'border', 'border-border', 'shadow-sm', 'z-10');
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground hover:text-destructive transition-colors"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>';
+            deleteBtn.classList.add('p-1', 'cursor-pointer');
+            
+            deleteBtn.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (typeof pos === 'number') {
+                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                    }
+                }
+            };
+
+            overlay.appendChild(deleteBtn);
+            wrapper.appendChild(overlay);
+
+            return {
+                dom: wrapper,
+                stopEvent: (e) => {
+                    // Stop event propagation if click is exactly on delete button, to prevent anchor following
+                    if (overlay.contains(e.target as unknown as globalThis.Node)) {
+                        return true;
+                    }
+                    return false;
+                },
+                ignoreMutation: () => true,
+            };
+        };
+    },
+
+    addCommands() {
+        return {
+            insertFileAttachment: (options: { src: string, filename: string, filesize?: string }) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+});
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fileAttachment: {
+            insertFileAttachment: (options: { src: string, filename: string, filesize?: string }) => ReturnType;
+        };
+    }
+}

src/lib/extensions/file-upload.ts

@@ -0,0 +1,73 @@
+import { Extension } from '@tiptap/core';
+import { activeTaskId, uploadTaskAttachment, activeNoteId, uploadNoteAttachment } from "@/store";
+import { toast } from "solid-sonner";
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fileUpload: {
+            uploadFile: () => ReturnType;
+        };
+    }
+}
+
+export const FileUpload = Extension.create({
+    name: 'fileUpload',
+
+    addCommands() {
+        return {
+            uploadFile: () => ({ editor }) => {
+                const taskId = activeTaskId();
+                const noteId = activeNoteId();
+
+                if (!taskId && !noteId) {
+                    toast.error("Cannot upload a file outside of a task or note.");
+                    return false;
+                }
+
+                const input = document.createElement("input");
+                input.type = "file";
+                // Accept any file type for generic attachments
+                input.accept = "*/*";
+                
+                input.onchange = async () => {
+                    if (input.files?.length) {
+                        const file = input.files[0];
+                        const filesize = file.size.toString();
+
+                        toast.promise(
+                            (async () => {
+                                if (taskId) {
+                                    return uploadTaskAttachment(taskId, file);
+                                } else {
+                                    return uploadNoteAttachment(noteId!, file);
+                                }
+                            })(),
+                            {
+                                loading: "Uploading file...",
+                                success: ({ url, filename: pbFilename }) => {
+                                    // Insert file attchment UI card
+                                    editor.chain()
+                                        .focus()
+                                        .insertFileAttachment({ src: url, filename: pbFilename, filesize })
+                                        .run();
+
+                                    // Manually force a new paragraph at the end so the user can keep typing
+                                    // Add paragraph after insertion
+                                    editor.chain()
+                                        .focus('end')
+                                        .insertContent('<p></p>')
+                                        .run();
+                                        
+                                    return "File uploaded successfully.";
+                                },
+                                error: "Failed to upload file."
+                            }
+                        );
+                    }
+                };
+                input.click();
+                return true;
+            },
+        };
+    },
+});

src/lib/extensions/file-viewer.ts

@@ -0,0 +1,157 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { render } from 'solid-js/web';
+import { JobFileSelector } from '@/components/JobFileSelector';
+
+export interface FileViewerOptions {
+    HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fileViewer: {
+            insertFileViewer: (options?: { src?: string }) => ReturnType;
+        };
+    }
+}
+
+export const FileViewer = Node.create<FileViewerOptions>({
+    name: 'fileViewer',
+
+    group: 'block',
+
+    selectable: true,
+
+    draggable: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                class: 'file-viewer-node group relative',
+            },
+        };
+    },
+
+    addAttributes() {
+        return {
+            jobId: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-job-id'),
+                renderHTML: attributes => {
+                    if (!attributes.jobId) return {};
+                    return { 'data-job-id': attributes.jobId };
+                },
+            },
+            collectionId: {
+                default: 'Job_Info_Prod',
+                parseHTML: element => element.getAttribute('data-collection-id') || 'Job_Info_Prod',
+                renderHTML: attributes => {
+                    return { 'data-collection-id': attributes.collectionId || 'Job_Info_Prod' };
+                },
+            },
+            filename: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-filename'),
+                renderHTML: attributes => {
+                    if (!attributes.filename) return {};
+                    return { 'data-filename': attributes.filename };
+                },
+            },
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="file-viewer-wrapper"]',
+            }
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        const { jobId, collectionId, filename, ...rest } = HTMLAttributes;
+        let src = '';
+        if (jobId && filename) {
+            src = `https://pocketbase.ccllc.pro/api/files/${collectionId}/${jobId}/${filename}`;
+        }
+        return ['div', mergeAttributes(this.options.HTMLAttributes, rest, { 'data-type': 'file-viewer-wrapper', class: 'file-viewer-wrapper relative w-full my-4 rounded-xl overflow-hidden border border-border flex min-h-[500px] bg-muted/20' }),
+            ['iframe', { 'data-type': 'file-viewer', src: src, class: 'w-full h-full border-0 absolute inset-0' }]
+        ];
+    },
+
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('file-viewer-wrapper', 'relative', 'w-full', 'my-4', 'rounded-xl', 'overflow-hidden', 'border', 'border-border', 'flex', 'bg-muted/10', 'group');
+
+            const hasFile = node.attrs.jobId && node.attrs.filename;
+
+            if (hasFile) {
+                // Viewer mode
+                wrapper.style.minHeight = '500px';
+
+                const iframe = document.createElement('iframe');
+                iframe.src = `https://pocketbase.ccllc.pro/api/files/${node.attrs.collectionId}/${node.attrs.jobId}/${node.attrs.filename}`;
+                iframe.classList.add('w-full', 'h-full', 'border-0', 'absolute', 'inset-0');
+
+                // Delete button overlay
+                const overlay = document.createElement('div');
+                overlay.classList.add('absolute', 'top-2', 'left-2', 'flex', '[@media(hover:hover)]:hidden', '[@media(hover:hover)]:group-hover:flex', 'bg-background/80', 'backdrop-blur-sm', 'p-1', 'rounded-lg', 'border', 'border-border', 'shadow-sm', 'z-10');
+
+                const deleteBtn = document.createElement('button');
+                deleteBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground hover:text-destructive transition-colors"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>';
+                deleteBtn.classList.add('p-1', 'cursor-pointer');
+                deleteBtn.onclick = (e) => {
+                    e.preventDefault();
+                    if (typeof getPos === 'function') {
+                        const pos = getPos();
+                        if (typeof pos === 'number') {
+                            editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                        }
+                    }
+                };
+
+                overlay.appendChild(deleteBtn);
+                wrapper.appendChild(iframe);
+                wrapper.appendChild(overlay);
+
+                return {
+                    dom: wrapper,
+                    stopEvent: () => true,
+                    ignoreMutation: () => true,
+                };
+            } else {
+                render(() => JobFileSelector({
+                    onSelectFile: (jobId: string, filename: string) => {
+                        if (typeof getPos === 'function') {
+                            editor.commands.command(({ tr }) => {
+                                const pos = getPos();
+                                if (typeof pos === 'number') {
+                                    tr.setNodeMarkup(pos, undefined, { jobId, collectionId: 'Job_Info_Prod', filename });
+                                    return true;
+                                }
+                                return false;
+                            });
+                        }
+                    }
+                }), wrapper);
+
+                return {
+                    dom: wrapper,
+                    stopEvent: () => true,
+                    ignoreMutation: () => true,
+                };
+            }
+        };
+    },
+
+    addCommands() {
+        return {
+            insertFileViewer: (options?: { src?: string }) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options || {},
+                });
+            },
+        };
+    },
+});

src/lib/extensions/image-upload.ts

@@ -0,0 +1,71 @@
+import { Extension } from '@tiptap/core';
+import { activeTaskId, uploadTaskAttachment, activeNoteId, uploadNoteAttachment } from "@/store";
+import { convertImageToWebpFile } from "@/lib/utils";
+import { toast } from "solid-sonner";
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            uploadImage: () => ReturnType;
+        };
+    }
+}
+
+export const ImageUpload = Extension.create({
+    name: 'imageUpload',
+
+    addCommands() {
+        return {
+            uploadImage: () => ({ editor }) => {
+                const taskId = activeTaskId();
+                const noteId = activeNoteId();
+
+                if (!taskId && !noteId) {
+                    toast.error("Cannot upload image outside of a task or note.");
+                    return false;
+                }
+
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = "image/*,.heic,.heif";
+                input.onchange = async () => {
+                    if (input.files?.length) {
+                        const originalFile = input.files[0];
+                        toast.promise(
+                            (async () => {
+                                const webpFile = await convertImageToWebpFile(originalFile);
+                                if (taskId) {
+                                    return uploadTaskAttachment(taskId, webpFile);
+                                } else {
+                                    return uploadNoteAttachment(noteId!, webpFile);
+                                }
+                            })(),
+                            {
+                                loading: "Processing & uploading image...",
+                                success: ({ url, filename }) => {
+                                    // Insert image
+                                    editor.chain()
+                                        .focus()
+                                        // @ts-ignore
+                                        .setImage({ src: url, filename })
+                                        .run();
+
+                                    // Manually force a new paragraph at the end so the user can keep typing
+                                    editor.chain()
+                                        .focus('end')
+                                        .insertContent('<p></p>')
+                                        .run();
+                                        
+                                    return "Image uploaded.";
+                                },
+                                error: "Failed to upload image."
+                            }
+                        );
+                    }
+                };
+                input.click();
+                return true;
+            },
+        };
+    },
+});

src/lib/extensions/image.ts

@@ -0,0 +1,201 @@
+import Image from "@tiptap/extension-image";
+
+export const CustomImage = Image.extend({
+    name: "image",
+
+    group: "block",
+    selectable: true,
+    draggable: true,
+
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            src: {
+                default: null,
+            },
+            width: {
+                default: null,
+                parseHTML: element => element.getAttribute('width'),
+                renderHTML: attributes => {
+                    if (!attributes.width) return {};
+                    return { width: attributes.width };
+                },
+            },
+            filename: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-filename'),
+                renderHTML: attributes => {
+                    if (!attributes.filename) return {};
+                    return { 'data-filename': attributes.filename };
+                },
+            },
+        };
+    },
+
+    addCommands() {
+        return {
+            setImage: (options: { src: string, alt?: string, title?: string, filename?: string }) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const wrapper = document.createElement('div');
+            // Give it position: relative and flex/inline-block to wrap the image tightly
+            wrapper.classList.add('image-wrapper', 'relative', 'inline-block', 'my-4', 'group', 'max-w-full');
+            wrapper.style.display = 'block'; // Block level to not mess up flow
+            wrapper.style.marginInline = 'auto'; // Center if desired, or let it flow
+            
+            if (node.attrs.width) {
+                const w = typeof node.attrs.width === 'number' ? `${node.attrs.width}px` : node.attrs.width;
+                wrapper.style.width = w;
+            } else {
+                wrapper.style.width = 'fit-content';
+            }
+
+            const img = document.createElement('img');
+            Object.entries(node.attrs).forEach(([key, value]) => {
+                if (value !== null && value !== undefined) {
+                    if (key === 'filename') {
+                        img.setAttribute('data-filename', value);
+                    } else {
+                        img.setAttribute(key, value);
+                    }
+                }
+            });
+            img.classList.add('rounded-lg', 'border', 'border-border', 'max-w-full', 'h-auto', 'cursor-default');
+            img.style.width = '100%';
+
+            // Resize handle
+            const resizer = document.createElement('div');
+            // Adding style.touchAction = 'none' to prevent mobile browser scrolling when dragging
+            resizer.style.touchAction = 'none';
+            resizer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8M3 16.2V21m0 0h4.8M3 21l6-6M21 7.8V3m0 0h-4.8M21 3l-6 6M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>';
+            resizer.classList.add('absolute', 'bottom-2', 'right-2', 'w-6', 'h-6', 'bg-black/50', 'hover:bg-black/80', 'backdrop-blur-sm', 'cursor-nwse-resize', 'transition-opacity', 'z-20', 'rounded-md', 'flex', 'items-center', 'justify-center', 'shadow-sm');
+            resizer.contentEditable = 'false';
+            
+            let isResizing = false;
+            let startX = 0;
+            let startWidth = 0;
+
+            const initResize = (clientX: number) => {
+                isResizing = true;
+                startX = clientX;
+                startWidth = wrapper.offsetWidth;
+            };
+
+            const doResize = (clientX: number, minW: number) => {
+                if (!isResizing) return;
+                const dx = clientX - startX;
+                const newWidth = Math.max(minW, startWidth + dx);
+                wrapper.style.width = `${newWidth}px`;
+            };
+
+            const stopResize = () => {
+                if (!isResizing) return;
+                isResizing = false;
+                if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (typeof pos === 'number') {
+                        editor.commands.command(({ tr }) => {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
+                                width: wrapper.offsetWidth,
+                            });
+                            return true;
+                        });
+                    }
+                }
+            };
+
+            resizer.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                initResize(e.clientX);
+                
+                const onMouseMove = (ev: MouseEvent) => {
+                    ev.preventDefault();
+                    doResize(ev.clientX, 100);
+                };
+                
+                const onMouseUp = (ev: MouseEvent) => {
+                    ev.preventDefault();
+                    stopResize();
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                };
+                
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            });
+
+            resizer.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                initResize(e.touches[0].clientX);
+                
+                const onTouchMove = (ev: TouchEvent) => {
+                    ev.preventDefault();
+                    doResize(ev.touches[0].clientX, 100);
+                };
+                
+                const onTouchEnd = () => {
+                    // touchend doesn't have touches[0] usually
+                    stopResize();
+                    document.removeEventListener('touchmove', onTouchMove);
+                    document.removeEventListener('touchend', onTouchEnd);
+                    document.removeEventListener('touchcancel', onTouchEnd);
+                };
+                
+                document.addEventListener('touchmove', onTouchMove, { passive: false });
+                document.addEventListener('touchend', onTouchEnd);
+                document.addEventListener('touchcancel', onTouchEnd);
+            }, { passive: false });
+
+            // Delete button overlay
+            const overlay = document.createElement('div');
+            overlay.classList.add('absolute', 'top-2', 'left-2', 'flex', '[@media(hover:hover)]:hidden', '[@media(hover:hover)]:group-hover:flex', 'bg-background/80', 'backdrop-blur-sm', 'p-1', 'rounded-lg', 'border', 'border-border', 'shadow-sm', 'z-10');
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground hover:text-destructive transition-colors"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>';
+            deleteBtn.classList.add('p-1', 'cursor-pointer');
+            
+            deleteBtn.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (typeof pos === 'number') {
+                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                    }
+                }
+            };
+
+            overlay.appendChild(deleteBtn);
+            wrapper.appendChild(img);
+            wrapper.appendChild(resizer);
+            wrapper.appendChild(overlay);
+
+            return {
+                dom: wrapper,
+                stopEvent: () => true,
+                ignoreMutation: () => true,
+            };
+        };
+    },
+});
+
+// @ts-ignore
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        // @ts-ignore
+        image: {
+            setImage: (options: { src: string, alt?: string, title?: string, filename?: string }) => ReturnType;
+        };
+    }
+}

src/lib/extensions/media-upload.ts

@@ -0,0 +1,79 @@
+import { Extension } from '@tiptap/core';
+import { activeTaskId, uploadTaskAttachment, activeNoteId, uploadNoteAttachment } from "@/store";
+import { convertImageToWebpFile } from "@/lib/utils";
+import { toast } from "solid-sonner";
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        mediaUpload: {
+            uploadMedia: () => ReturnType;
+        };
+    }
+}
+
+export const MediaUpload = Extension.create({
+    name: 'mediaUpload',
+
+    addCommands() {
+        return {
+            uploadMedia: () => ({ editor }) => {
+                const taskId = activeTaskId();
+                const noteId = activeNoteId();
+
+                if (!taskId && !noteId) {
+                    toast.error("Cannot upload media outside of a task or note.");
+                    return false;
+                }
+
+                const input = document.createElement("input");
+                input.type = "file";
+                input.onchange = async () => {
+                    if (input.files?.length) {
+                        const originalFile = input.files[0];
+                        const isImage = originalFile.type.startsWith('image/');
+                        const isVideo = originalFile.type.startsWith('video/');
+
+                        toast.promise(
+                            (async () => {
+                                let fileToUpload = originalFile;
+                                if (isImage && !originalFile.type.includes('svg') && !originalFile.type.includes('gif')) {
+                                    fileToUpload = await convertImageToWebpFile(originalFile);
+                                }
+
+                                if (taskId) {
+                                    return uploadTaskAttachment(taskId, fileToUpload);
+                                } else {
+                                    return uploadNoteAttachment(noteId!, fileToUpload);
+                                }
+                            })(),
+                            {
+                                loading: "Processing & uploading media...",
+                                success: ({ url, filename }) => {
+                                    if (isImage) {
+                                        // @ts-ignore
+                                        editor.chain().focus().setImage({ src: url, filename }).run();
+                                    } else if (isVideo) {
+                                        editor.chain().focus().setVideo({ src: url, filename }).run();
+                                    } else {
+                                        editor.chain().focus().insertFileAttachment({ src: url, filename, filesize: originalFile.size.toString() }).run();
+                                    }
+
+                                    // Manually force a new paragraph at the end so the user can keep typing
+                                    editor.chain()
+                                        .focus('end')
+                                        .insertContent('<p></p>')
+                                        .run();
+                                        
+                                    return "Media uploaded.";
+                                },
+                                error: "Failed to upload media."
+                            }
+                        );
+                    }
+                };
+                input.click();
+                return true;
+            },
+        };
+    },
+});

src/lib/extensions/video-upload.ts

@@ -0,0 +1,69 @@
+import { Extension } from '@tiptap/core';
+import { activeTaskId, uploadTaskAttachment, activeNoteId, uploadNoteAttachment } from "@/store";
+import { toast } from "solid-sonner";
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        videoUpload: {
+            uploadVideo: () => ReturnType;
+        };
+    }
+}
+
+export const VideoUpload = Extension.create({
+    name: 'videoUpload',
+
+    addCommands() {
+        return {
+            uploadVideo: () => ({ editor }) => {
+                const taskId = activeTaskId();
+                const noteId = activeNoteId();
+
+                if (!taskId && !noteId) {
+                    toast.error("Cannot upload video outside of a task or note.");
+                    return false;
+                }
+
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = "video/*";
+                input.onchange = async () => {
+                    if (input.files?.length) {
+                        const originalFile = input.files[0];
+                        toast.promise(
+                            (async () => {
+                                // For video, we don't necessarily convert to webp. We just upload it directly.
+                                if (taskId) {
+                                    return uploadTaskAttachment(taskId, originalFile);
+                                } else {
+                                    return uploadNoteAttachment(noteId!, originalFile);
+                                }
+                            })(),
+                            {
+                                loading: "Uploading video...",
+                                success: ({ url, filename }) => {
+                                    // Insert video
+                                    editor.chain()
+                                        .focus()
+                                        .setVideo({ src: url, filename })
+                                        .run();
+
+                                    // Manually force a new paragraph at the end so the user can keep typing
+                                    editor.chain()
+                                        .focus('end')
+                                        .insertContent('<p></p>')
+                                        .run();
+                                        
+                                    return "Video uploaded.";
+                                },
+                                error: "Failed to upload video."
+                            }
+                        );
+                    }
+                };
+                input.click();
+                return true;
+            },
+        };
+    },
+});

src/lib/extensions/video.ts

@@ -0,0 +1,253 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface VideoOptions {
+    HTMLAttributes: Record<string, any>;
+}
+
+export const Video = Node.create<VideoOptions>({
+    name: 'video',
+
+    group: 'block',
+    
+    // Allows it to be selected and manipulated as a single block
+    selectable: true,
+    draggable: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                class: 'w-full rounded-lg border border-border/50 shadow-sm overflow-hidden my-4',
+                controls: true,
+            },
+        };
+    },
+
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            width: {
+                default: null,
+                parseHTML: element => element.getAttribute('width'),
+                renderHTML: attributes => {
+                    if (!attributes.width) return {};
+                    return { width: attributes.width };
+                },
+            },
+            filename: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-filename'),
+                renderHTML: attributes => {
+                    if (!attributes.filename) return {};
+                    return { 'data-filename': attributes.filename };
+                },
+            },
+        };
+    },
+
+    addCommands() {
+        return {
+            setVideo: (options: { src: string, filename?: string }) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'video',
+            },
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+
+    addKeyboardShortcuts() {
+        return {
+            Backspace: () => {
+                const { selection } = this.editor.state;
+                if (!selection.empty) {
+                    const selectedNode = this.editor.state.doc.nodeAt(selection.from);
+                    if (selectedNode?.type.name === this.name) {
+                        return true; // Prevent default deletion
+                    }
+                }
+                return false;
+            },
+            Delete: () => {
+                const { selection } = this.editor.state;
+                if (!selection.empty) {
+                    const selectedNode = this.editor.state.doc.nodeAt(selection.from);
+                    if (selectedNode?.type.name === this.name) {
+                        return true; // Prevent default deletion
+                    }
+                }
+                return false;
+            },
+        };
+    },
+
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('video-wrapper', 'relative', 'inline-block', 'my-4', 'group', 'max-w-full');
+            wrapper.style.display = 'block';
+            wrapper.style.marginInline = 'auto'; // Center if desired
+            
+            if (node.attrs.width) {
+                const w = typeof node.attrs.width === 'number' ? `${node.attrs.width}px` : node.attrs.width;
+                wrapper.style.width = w;
+            } else {
+                wrapper.style.width = '100%';
+            }
+
+            const video = document.createElement('video');
+            Object.entries(node.attrs).forEach(([key, value]) => {
+                if (value !== null && value !== undefined) {
+                    if (key === 'filename') {
+                        video.setAttribute('data-filename', value);
+                    } else {
+                        video.setAttribute(key, value);
+                    }
+                }
+            });
+            // Apply default attributes if not present
+            if (!video.hasAttribute('controls')) {
+                video.setAttribute('controls', 'true');
+            }
+            video.classList.add('w-full', 'rounded-lg', 'border', 'border-border/50', 'shadow-sm', 'overflow-hidden');
+            video.style.width = '100%';
+
+            // Resize handle
+            const resizer = document.createElement('div');
+            // Adding style.touchAction = 'none' to prevent mobile browser scrolling when dragging
+            resizer.style.touchAction = 'none';
+            resizer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8M3 16.2V21m0 0h4.8M3 21l6-6M21 7.8V3m0 0h-4.8M21 3l-6 6M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>';
+            resizer.classList.add('absolute', 'bottom-2', 'right-2', 'w-6', 'h-6', 'bg-black/50', 'hover:bg-black/80', 'backdrop-blur-sm', 'cursor-nwse-resize', 'transition-opacity', 'z-20', 'rounded-md', 'flex', 'items-center', 'justify-center', 'shadow-sm');
+            resizer.contentEditable = 'false';
+            
+            let isResizing = false;
+            let startX = 0;
+            let startWidth = 0;
+
+            const initResize = (clientX: number) => {
+                isResizing = true;
+                startX = clientX;
+                startWidth = wrapper.offsetWidth;
+            };
+
+            const doResize = (clientX: number, minW: number) => {
+                if (!isResizing) return;
+                const dx = clientX - startX;
+                const newWidth = Math.max(minW, startWidth + dx);
+                wrapper.style.width = `${newWidth}px`;
+            };
+
+            const stopResize = () => {
+                if (!isResizing) return;
+                isResizing = false;
+                if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (typeof pos === 'number') {
+                        editor.commands.command(({ tr }) => {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
+                                width: wrapper.offsetWidth,
+                            });
+                            return true;
+                        });
+                    }
+                }
+            };
+
+            resizer.addEventListener('mousedown', (e) => {
+                // Prevent event from dragging the whole block
+                e.preventDefault();
+                e.stopPropagation();
+                initResize(e.clientX);
+                
+                const onMouseMove = (ev: MouseEvent) => {
+                    ev.preventDefault();
+                    doResize(ev.clientX, 200);
+                };
+                
+                const onMouseUp = (ev: MouseEvent) => {
+                    ev.preventDefault();
+                    stopResize();
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                };
+                
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            });
+
+            resizer.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                initResize(e.touches[0].clientX);
+                
+                const onTouchMove = (ev: TouchEvent) => {
+                    ev.preventDefault();
+                    doResize(ev.touches[0].clientX, 200);
+                };
+                
+                const onTouchEnd = () => {
+                    stopResize();
+                    document.removeEventListener('touchmove', onTouchMove);
+                    document.removeEventListener('touchend', onTouchEnd);
+                    document.removeEventListener('touchcancel', onTouchEnd);
+                };
+                
+                document.addEventListener('touchmove', onTouchMove, { passive: false });
+                document.addEventListener('touchend', onTouchEnd);
+                document.addEventListener('touchcancel', onTouchEnd);
+            }, { passive: false });
+
+            // Delete button overlay
+            const overlay = document.createElement('div');
+            overlay.classList.add('absolute', 'top-2', 'left-2', 'flex', '[@media(hover:hover)]:hidden', '[@media(hover:hover)]:group-hover:flex', 'bg-background/80', 'backdrop-blur-sm', 'p-1', 'rounded-lg', 'border', 'border-border', 'shadow-sm', 'z-10');
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground hover:text-destructive transition-colors"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>';
+            deleteBtn.classList.add('p-1', 'cursor-pointer');
+            
+            deleteBtn.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (typeof pos === 'number') {
+                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                    }
+                }
+            };
+
+            overlay.appendChild(deleteBtn);
+            wrapper.appendChild(video);
+            wrapper.appendChild(resizer);
+            wrapper.appendChild(overlay);
+
+            return {
+                dom: wrapper,
+                stopEvent: () => true, // Stops events from propagating to editor (makes the input usable)
+                ignoreMutation: () => true,
+            };
+        };
+    },
+});
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        video: {
+            setVideo: (options: { src: string, filename?: string }) => ReturnType;
+        };
+    }
+}

src/lib/mention-suggestion.tsx

@@ -89,6 +89,7 @@ export const noteSuggestion = {
     char: '#',
     items: ({ query }: { query: string }) => {
         return store.notes
+            .filter(note => !(note.tags || []).some(t => t.startsWith("child-of-")))
             .filter(note => note.title.toLowerCase().includes(query.toLowerCase()))
             .map(note => ({
                 id: note.id,

src/lib/recurrence.ts

@@ -0,0 +1,67 @@
+export type Recurrence = {
+    type: 'daily' | 'weekly' | 'monthly';
+    days?: number[];
+    dayOfMonth?: number;
+};
+
+const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+const addDays = (date: Date, days: number) => {
+    const d = new Date(date);
+    d.setDate(d.getDate() + days);
+    return d;
+};
+
+const getNextDaily = (completedAt: Date) => addDays(startOfDay(completedAt), 1);
+
+const getNextWeekly = (completedAt: Date, days: number[]) => {
+    if (!days || days.length === 0) return null;
+    const base = startOfDay(completedAt);
+    for (let offset = 1; offset <= 7; offset++) {
+        const candidate = addDays(base, offset);
+        if (days.includes(candidate.getDay())) return candidate;
+    }
+    return null;
+};
+
+const getNextMonthly = (completedAt: Date, dayOfMonth?: number) => {
+    if (!dayOfMonth || dayOfMonth < 1 || dayOfMonth > 31) return null;
+    const base = startOfDay(completedAt);
+    const baseDay = base.getDate();
+    const startOffset = dayOfMonth > baseDay ? 0 : 1;
+
+    for (let offset = startOffset; offset <= 12; offset++) {
+        const year = base.getFullYear();
+        const monthIndex = base.getMonth() + offset;
+        const candidate = new Date(year, monthIndex, dayOfMonth);
+        if (candidate.getMonth() === (monthIndex % 12 + 12) % 12) {
+            if (candidate.getTime() > completedAt.getTime()) {
+                return startOfDay(candidate);
+            }
+        }
+    }
+    return null;
+};
+
+export const getNextRecurrenceDate = (recurrence: Recurrence, completedAt: Date) => {
+    if (recurrence.type === 'daily') return getNextDaily(completedAt);
+    if (recurrence.type === 'weekly') return getNextWeekly(completedAt, recurrence.days || []);
+    if (recurrence.type === 'monthly') return getNextMonthly(completedAt, recurrence.dayOfMonth);
+    return null;
+};
+
+export const getRecurrenceProgress = (
+    recurrence: Recurrence | null | undefined,
+    completedAtIso: string | null | undefined,
+    nowMs: number
+) => {
+    if (!recurrence || !completedAtIso) return null;
+    const completedAt = new Date(completedAtIso);
+    if (isNaN(completedAt.getTime())) return null;
+    const next = getNextRecurrenceDate(recurrence, completedAt);
+    if (!next) return null;
+    const total = next.getTime() - completedAt.getTime();
+    if (total <= 0) return null;
+    const progress = (nowMs - completedAt.getTime()) / total;
+    return Math.max(0, Math.min(1, progress));
+};

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import heic2any from "heic2any"
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -38,7 +39,28 @@ export const compressImageBase64 = (base64Str: string, maxWidth = 800, quality =
 };
 
 export const convertImageToWebpFile = async (file: File): Promise<File> => {
-    return new Promise((resolve) => {
+    return new Promise(async (resolve) => {
+        let processableFile: File | Blob = file;
+
+        // Convert HEIC/HEIF to JPEG first so the browser can read it
+        const isHeic = file.name.toLowerCase().endsWith('.heic') || file.name.toLowerCase().endsWith('.heif');
+        if (isHeic) {
+            try {
+                const converted = await heic2any({
+                    blob: file,
+                    toType: "image/jpeg",
+                    quality: 0.8 // high quality intermediate step
+                });
+                
+                // heic2any can return an array of blobs if it's an image sequence, just take the first
+                processableFile = Array.isArray(converted) ? converted[0] : converted;
+            } catch (err) {
+                console.error("Failed to convert HEIC image:", err);
+                // If conversion fails, just fall back to returning the original file
+                return resolve(file);
+            }
+        }
+
         const reader = new FileReader();
         reader.onload = (e) => {
             const img = new Image();
@@ -92,6 +114,6 @@ export const convertImageToWebpFile = async (file: File): Promise<File> => {
             img.src = e.target?.result as string;
         };
         reader.onerror = () => resolve(file); // Fallback
-        reader.readAsDataURL(file);
+        reader.readAsDataURL(processableFile);
     });
 };

src/store/index.ts

@@ -4,6 +4,12 @@ import { pb } from "@/lib/pocketbase";
 import { toast } from "solid-sonner";
 import { TASGRID_COLLECTION, TAGS_COLLECTION, SHARE_RULES_COLLECTION, BUCKETS_COLLECTION, NOTES_COLLECTION, URGENCY_HOURS, SIZE_HOURS } from "@/lib/constants";
 
+// Helper to get the current user's personalized favorite tag
+export const getFavoriteTag = () => {
+    const userId = pb.authStore.model?.id;
+    return userId ? `__${userId}_favorite__` : "__favorite__";
+};
+
 const LIST_FIELDS = 'id,collectionId,collectionName,created,updated,title,startDate,dueDate,priority,status,completed,tags,user,size,recurrence,sharedWith,deletedAt';
 
 const getStorageKey = () => {
@@ -15,6 +21,7 @@ export const [now, setNow] = createSignal(Date.now());
 // Context: 'mine' = My Bucket (default), { userId: string } = Oversight View for that user, { bucketId: string, name: string } = Bucket View
 type TaskContext = 'mine' | { userId: string, name: string } | { bucketId: string, name: string };
 export const [activeTaskId, setActiveTaskId] = createSignal<string | null>(null);
+export const [activeNoteId, setActiveNoteId] = createSignal<string | null>(null);
 export const [currentTaskContext, setCurrentTaskContext] = createSignal<TaskContext>('mine');
 
 export type UrgencyLevel = number;
@@ -146,6 +153,7 @@ export interface Note {
     tasks: string[]; // List of related task IDs
     created: string;
     updated: string;
+    deletedAt?: number | null; // Timestamp of soft delete or null if restored
 }
 
 export interface FilterTag {
@@ -161,8 +169,76 @@ export interface Filter {
     urgencyMin: number;
     urgencyMax: number;
     editedToday: boolean;
+    ownedByMe: boolean;
+    starred: boolean;
+    jobStatus: FilterTag[];
+    jobDivision: FilterTag[];
 }
 
+// Background sync for Context Switcher (polling fallback for realtime)
+let contextSyncInterval: number | undefined;
+
+export const startContextPolling = () => {
+    if (contextSyncInterval) {
+        clearInterval(contextSyncInterval);
+        contextSyncInterval = undefined;
+    }
+
+    const ctx = currentTaskContext();
+    if (typeof ctx === 'object' && 'userId' in ctx) {
+        contextSyncInterval = window.setInterval(async () => {
+            if (!pb.authStore.isValid) return;
+
+            try {
+                // Fetch only recent updates (last 30s) to minimize payload
+                const timeStr = new Date(Date.now() - 30000).toISOString();
+                const records = await pb.collection(TASGRID_COLLECTION).getFullList({
+                    filter: `user = "${ctx.userId}" && updated >= "${timeStr}"`,
+                    sort: '-updated',
+                    fields: LIST_FIELDS,
+                    requestKey: 'context-poll'
+                });
+
+                if (records.length === 0) return;
+
+                setStore("tasks", (currentTasks) => {
+                    const taskMap = new Map(currentTasks.map(t => [t.id, t]));
+                    let changed = false;
+
+                    records.forEach((r: any) => {
+                        if (r.tags?.includes("__template__")) return;
+
+                        const existing = taskMap.get(r.id);
+                        if (existing && existing.updated === r.updated) return;
+
+                        const newTask = mapRecordToTask(r);
+                        if (existing && existing.content) {
+                            newTask.content = existing.content;
+                        }
+                        taskMap.set(r.id, newTask);
+                        changed = true;
+                    });
+
+                    if (changed) return Array.from(taskMap.values());
+                    return currentTasks;
+                });
+            } catch (err: any) {
+                if (!err.isAbort) {
+                    console.warn("Context poll failed:", err);
+                }
+            }
+        }, 5000); // 5 seconds
+    }
+};
+
+createRoot(() => {
+    createEffect(() => {
+        // Re-run whenever ctx changes
+        currentTaskContext();
+        startContextPolling();
+    });
+});
+
 export interface FilterTemplate {
     id: string;
     name: string;
@@ -203,6 +279,7 @@ interface TaskStore {
     notes: Note[];
     isNotepadMode: boolean;
     quickloadTasks: string[];
+    noteFilter: Filter;
 }
 
 // Initial empty state
@@ -221,7 +298,11 @@ export const [store, setStore] = createStore<TaskStore>({
         priorityMax: 10,
         urgencyMin: 1,
         urgencyMax: 10,
-        editedToday: false
+        editedToday: false,
+        ownedByMe: false,
+        starred: false,
+        jobStatus: [],
+        jobDivision: []
     },
     shareRules: [],
     filterTemplates: [],
@@ -229,7 +310,20 @@ export const [store, setStore] = createStore<TaskStore>({
     subscribedBuckets: [],
     notes: [],
     isNotepadMode: false,
-    quickloadTasks: []
+    quickloadTasks: [],
+    noteFilter: {
+        query: "",
+        tags: [],
+        priorityMin: 1,
+        priorityMax: 10,
+        urgencyMin: 1,
+        urgencyMax: 10,
+        editedToday: false,
+        ownedByMe: false,
+        starred: false,
+        jobStatus: [],
+        jobDivision: []
+    }
 });
 
 export const matchesFilter = (task: Task) => {
@@ -252,8 +346,7 @@ export const matchesFilter = (task: Task) => {
 
                 // EXCLUDE Buckets from the main "Mine" view
                 // The user wants to see "Direct Shares" (User Tags), not "Bucket Subscriptions" here.
-                const isBucket = store.buckets.some(b => b.name.toLowerCase() === tagName.toLowerCase());
-                if (isBucket) return false;
+                if (isBucketTag(tagName)) return false;
 
                 return task.tags?.some(t => t.toLowerCase() === tagName.toLowerCase());
             }
@@ -327,6 +420,16 @@ export const matchesFilter = (task: Task) => {
         if (today !== updated) return false;
     }
 
+    // Owned By Me
+    if (f.ownedByMe && task.ownerId !== currentUserId) {
+        return false;
+    }
+
+    // Starred
+    if (f.starred && !task.tags?.includes(getFavoriteTag())) {
+        return false;
+    }
+
     return true;
 };
 
@@ -478,29 +581,112 @@ const mapRecordToTask = (r: any): Task => {
     };
 };
 
-export const uploadTaskAttachment = async (taskId: string, file: File): Promise<string> => {
+export const uploadTaskAttachment = async (taskId: string, file: File): Promise<{ url: string, filename: string }> => {
     try {
         const formData = new FormData();
-        formData.append('attachments', file);
+        formData.append('attachments+', file);
 
         const record = await pb.collection(TASGRID_COLLECTION).update(taskId, formData);
 
-        // Return the URL for the newly uploaded file. PocketBase appends new files to the array.
-        // We need to find the specific filename that was just uploaded to get its URL.
-        // Since we don't know the exact generated filename, we can return the URL of the last file in the array.
         if (record.attachments && record.attachments.length > 0) {
             const latestFilename = record.attachments[record.attachments.length - 1];
-            return pb.files.getURL(record, latestFilename);
+            return {
+                url: pb.files.getURL(record, latestFilename),
+                filename: latestFilename
+            };
         }
 
         throw new Error("File uploaded but no attachment returned");
     } catch (err: any) {
-        console.error("Error uploading attachment:", err);
+        console.error("Error uploading attachment. Validation details:", JSON.stringify(err.data, null, 2));
         toast.error("Failed to upload image.");
         throw err;
     }
 };
 
+export const uploadNoteAttachment = async (noteId: string, file: File): Promise<{ url: string, filename: string }> => {
+    try {
+        const formData = new FormData();
+        formData.append('attachments+', file);
+
+        const record = await pb.collection(NOTES_COLLECTION).update(noteId, formData);
+
+        if (record.attachments && record.attachments.length > 0) {
+            const latestFilename = record.attachments[record.attachments.length - 1];
+            return {
+                url: pb.files.getURL(record, latestFilename),
+                filename: latestFilename
+            };
+        }
+
+        throw new Error("File uploaded but no attachment returned");
+    } catch (err: any) {
+        console.error("Error uploading note attachment. Validation details:", JSON.stringify(err.data, null, 2));
+        toast.error("Failed to upload image to note.");
+        throw err;
+    }
+};
+
+export const cleanupNoteAttachments = async (noteId: string) => {
+    if (!pb.authStore.isValid) return;
+
+    try {
+        const record = await pb.collection(NOTES_COLLECTION).getOne(noteId);
+        if (!record.attachments || record.attachments.length === 0) return;
+
+        const content = record.content || "";
+        const filesToDelete: string[] = [];
+        
+        // Also check decoded content just in case of encoding mismatches
+        const decodedContent = decodeURIComponent(content);
+
+        for (const filename of record.attachments) {
+            // Check for literal filename OR the part of the URL that includes the filename
+            if (!content.includes(filename) && !decodedContent.includes(filename)) {
+                filesToDelete.push(filename);
+            }
+        }
+
+        if (filesToDelete.length > 0) {
+            await pb.collection(NOTES_COLLECTION).update(noteId, {
+                "attachments-": filesToDelete
+            });
+            console.log(`[CLEANUP] Deleted ${filesToDelete.length} orphaned attachment(s) for note ${noteId}`);
+        }
+    } catch (err) {
+        console.error("[CLEANUP] Failed to clean up orphaned note attachments:", err);
+    }
+};
+
+export const cleanupTaskAttachments = async (taskId: string) => {
+    if (!pb.authStore.isValid) return;
+
+    try {
+        const record = await pb.collection(TASGRID_COLLECTION).getOne(taskId);
+        if (!record.attachments || record.attachments.length === 0) return;
+
+        const content = record.content || "";
+        const filesToDelete: string[] = [];
+        
+        const decodedContent = decodeURIComponent(content);
+
+        for (const filename of record.attachments) {
+            if (!content.includes(filename) && !decodedContent.includes(filename)) {
+                filesToDelete.push(filename);
+            }
+        }
+
+        if (filesToDelete.length > 0) {
+            await pb.collection(TASGRID_COLLECTION).update(taskId, {
+                "attachments-": filesToDelete
+            });
+            console.log(`[CLEANUP] Deleted ${filesToDelete.length} orphaned attachment(s) for task ${taskId}`);
+        }
+    } catch (err) {
+        console.error("[CLEANUP] Failed to clean up orphaned task attachments:", err);
+    }
+};
+
 const mapRecordToShareRule = (r: any): ShareRule => {
     return {
         id: r.id,
@@ -522,10 +708,35 @@ const mapRecordToNote = (r: any): Note => {
         user: r.user,
         tasks: r.tasks || [],
         created: r.created,
-        updated: r.updated
+        updated: r.updated,
+        deletedAt: r.deletedAt ? new Date(r.deletedAt).getTime() : undefined
     };
 };
 
+export const fetchNoteById = async (id: string): Promise<Note | null> => {
+    try {
+        const record = await pb.collection(NOTES_COLLECTION).getOne(id);
+        if (!record) return null;
+        return mapRecordToNote(record);
+    } catch (err) {
+        console.error("Failed to fetch note by ID:", err);
+        return null;
+    }
+};
+
+export const updateStoreWithNote = (note: Note) => {
+    setStore("notes", (currentNotes) => {
+        const index = currentNotes.findIndex(n => n.id === note.id);
+        if (index !== -1) {
+            const newNotes = [...currentNotes];
+            newNotes[index] = note;
+            return newNotes;
+        }
+        return [...currentNotes, note];
+    });
+};
+
+
 // Helper to check if a task should be visible based on ownership, shares, or rules
 const shouldTaskBeVisible = (task: any, currentUserId: string): boolean => {
     // Own task
@@ -543,6 +754,7 @@ const shouldTaskBeVisible = (task: any, currentUserId: string): boolean => {
         // We ignore the rule.ownerId check (which would match the task.user)
         // and instead match purely on the tag.
         if (rule.ownerId === rule.targetUserId && rule.type === 'tag') {
+            if (isBucketTag(rule.tagName || "")) return false;
             const tags: string[] = task.tags || [];
             return tags.some(t => t.toLowerCase() === (rule.tagName || "").toLowerCase());
         }
@@ -575,6 +787,26 @@ const isTaskInSubscribedBucket = (task: any): boolean => {
     });
 };
 
+// Helper: detect bucket tags robustly (case-insensitive, with or without '@')
+const isBucketTag = (tagName: string): boolean => {
+    const raw = (tagName || "").trim().toLowerCase();
+    if (!raw) return false;
+    const normalized = raw.startsWith("@") ? raw.slice(1) : raw;
+
+    const bucketNameMatch = store.buckets.some(b => {
+        const bName = (b.name || "").trim().toLowerCase();
+        return normalized === bName || raw === `@${bName}`;
+    });
+    if (bucketNameMatch) return true;
+
+    const bucketTagDefMatch = store.tagDefinitions.some(d => {
+        if (!d.isBucket) return false;
+        const dName = (d.name || "").trim().toLowerCase();
+        return raw === dName || normalized === dName || raw === `@${dName}`;
+    });
+    return bucketTagDefMatch;
+};
+
 export const subscribeToRealtime = async () => {
     // Unsubscribe first to avoid duplicates
     await pb.collection(TASGRID_COLLECTION).unsubscribe('*');
@@ -792,6 +1024,128 @@ export const subscribeToRealtime = async () => {
     });
 };
 
+const runLegacyTagMigration = async () => {
+    const currentUserId = pb.authStore.model?.id;
+    if (!currentUserId) return;
+
+    try {
+        const userRec = await pb.collection('users').getOne(currentUserId, { requestKey: null });
+        const prefs = userRec.Taskgrid_pref || {};
+
+        if (prefs.migratedLegacyTagsV1) {
+            return; // Already migrated
+        }
+
+        console.log("[MIGRATION] Starting legacy tag migration...");
+
+        // Fetch users and buckets
+        const [allUsers, allBuckets] = await Promise.all([
+            pb.collection('users').getFullList({
+                filter: 'verified = true',
+                fields: 'name,email',
+                requestKey: null
+            }),
+            pb.collection(BUCKETS_COLLECTION).getFullList({
+                fields: 'name',
+                requestKey: null
+            })
+        ]);
+
+        const validNames = new Set([
+            ...allBuckets.map(b => b.name.toLowerCase()),
+            ...allUsers.map(u => (u.name || u.email)?.toLowerCase()).filter(Boolean)
+        ]);
+
+        // Fetch all Tasks for this user
+        const tasks = await pb.collection(TASGRID_COLLECTION).getFullList({
+            filter: `user = "${currentUserId}"`,
+            requestKey: null
+        });
+
+        let tasksUpdated = 0;
+        for (const t of tasks) {
+            if (!t.tags || t.tags.length === 0) continue;
+            let changed = false;
+            const newTags = t.tags.map((tag: string) => {
+                if (!tag.startsWith("@") && validNames.has(tag.toLowerCase())) {
+                    changed = true;
+                    return `@${tag}`;
+                }
+                return tag;
+            });
+
+            if (changed) {
+                await pb.collection(TASGRID_COLLECTION).update(t.id, { tags: newTags }, { requestKey: null });
+                tasksUpdated++;
+            }
+        }
+
+        // Fetch all Notes for this user
+        const notes = await pb.collection(NOTES_COLLECTION).getFullList({
+            filter: `user = "${currentUserId}"`,
+            requestKey: null
+        });
+
+        let notesUpdated = 0;
+        for (const n of notes) {
+            if (!n.tags || n.tags.length === 0) continue;
+            let changed = false;
+            const newTags = n.tags.map((tag: string) => {
+                if (!tag.startsWith("@") && validNames.has(tag.toLowerCase())) {
+                    changed = true;
+                    return `@${tag}`;
+                }
+                return tag;
+            });
+
+            if (changed) {
+                await pb.collection(NOTES_COLLECTION).update(n.id, { tags: newTags }, { requestKey: null });
+                notesUpdated++;
+            }
+        }
+
+        prefs.migratedLegacyTagsV1 = true;
+        await pb.collection('users').update(currentUserId, { Taskgrid_pref: prefs }, { requestKey: null });
+
+        if (pb.authStore.model) {
+            pb.authStore.model.Taskgrid_pref = prefs;
+        }
+
+        console.log(`[MIGRATION] Completed. Updated ${tasksUpdated} tasks and ${notesUpdated} notes.`);
+
+        // Update local state directly so it reflects immediately
+        setStore("tasks", (tasks) => tasks.map(t => {
+            let localChanged = false;
+            const nt = t.tags?.map(tag => {
+                if (!tag.startsWith("@") && validNames.has(tag.toLowerCase())) {
+                    localChanged = true;
+                    return `@${tag}`;
+                }
+                return tag;
+            });
+            if (localChanged) return { ...t, tags: nt };
+            return t;
+        }));
+
+        setStore("notes", (items) => items.map(n => {
+            let localChanged = false;
+            const nt = n.tags?.map(tag => {
+                if (!tag.startsWith("@") && validNames.has(tag.toLowerCase())) {
+                    localChanged = true;
+                    return `@${tag}`;
+                }
+                return tag;
+            });
+            if (localChanged) return { ...n, tags: nt };
+            return n;
+        }));
+
+    } catch (err) {
+        console.error("[MIGRATION] Failed:", err);
+    }
+};
+
+
 export const initStore = async () => {
     if (!pb.authStore.isValid || store.isInitializing) return;
     setStore("isInitializing", true);
@@ -869,7 +1223,18 @@ export const initStore = async () => {
                     matrixScaleDays: prefs.matrixScaleDays || 30,
                     prefId: userId,
                     subscribedBuckets: user.subscribedBuckets || [],
-                    quickloadTasks: prefs.quickloadTasks || []
+                    quickloadTasks: prefs.quickloadTasks || [],
+                    noteFilter: prefs.noteFilter || {
+                        query: "",
+                        tags: [],
+                        priorityMin: 1,
+                        priorityMax: 10,
+                        urgencyMin: 1,
+                        urgencyMax: 10,
+                        editedToday: false,
+                        ownedByMe: false,
+                        starred: false
+                    }
                 });
             }
         } catch (prefErr) {
@@ -1124,6 +1489,9 @@ export const initStore = async () => {
         // Fire off background sync
         await backgroundSync();
 
+        // Run one-time migration for legacy tags
+        await runLegacyTagMigration();
+
         // Separate Templates load (less critical)
         try {
             const templates = await pb.collection(TASGRID_COLLECTION).getFullList({
@@ -1648,6 +2016,57 @@ export const removeTagDefinition = async (name: string) => {
     }
 };
 
+export const updateNote = async (id: string, updates: Partial<Note>) => {
+    if (!pb.authStore.isValid) return;
+
+    // Optimistic update
+    const optimisticUpdates = {
+        ...updates,
+        updated: new Date().toISOString()
+    };
+    setStore("notes", (n) => n.id === id, optimisticUpdates);
+
+    try {
+        const pbUpdates: any = { ...updates };
+
+        if ("deletedAt" in updates) {
+            if (updates.deletedAt) {
+                pbUpdates.deletedAt = new Date(updates.deletedAt).toISOString();
+            } else {
+                pbUpdates.deletedAt = null;
+            }
+        }
+
+        await pb.collection(NOTES_COLLECTION).update(id, pbUpdates, { requestKey: null });
+    } catch (err) {
+        console.error("Note update failed", err);
+        toast.error("Failed to update note.");
+    }
+};
+
+export const removeNote = (id: string) => {
+    const nowTs = Date.now();
+    updateNote(id, { deletedAt: nowTs });
+};
+
+export const restoreNote = (id: string) => {
+    updateNote(id, { deletedAt: null });
+};
+
+export const deleteNotePermanently = async (id: string) => {
+    if (!pb.authStore.isValid) return;
+
+    // Optimistic
+    setStore("notes", (n) => n.filter((n) => n.id !== id));
+
+    try {
+        await pb.collection(NOTES_COLLECTION).delete(id);
+    } catch (err) {
+        console.error("Note delete failed", err);
+        toast.error("Failed to delete note.");
+    }
+};
+
 
 
 export const syncSystemTagsAndRules = async () => {
@@ -2017,7 +2436,8 @@ export const syncPreferences = async () => {
             uWeight: store.uWeight,
             matrixScaleDays: store.matrixScaleDays,
             tagDefinitions: store.tagDefinitions,
-            quickloadTasks: store.quickloadTasks
+            quickloadTasks: store.quickloadTasks,
+            noteFilter: store.noteFilter
         };
 
         await pb.collection('users').update(userId, {
@@ -2364,10 +2784,99 @@ export const clearFilter = () => {
         priorityMax: 10,
         urgencyMin: 1,
         urgencyMax: 10,
-        editedToday: false
+        editedToday: false,
+        ownedByMe: false,
+        starred: false,
+        jobStatus: [],
+        jobDivision: []
     });
 };
 
+export const setNoteFilter = (update: Partial<Filter>) => {
+    setStore("noteFilter", (f) => ({ ...f, ...update }));
+    syncPreferences();
+};
+
+const NOTE_FILTER_TEMPLATES_COLLECTION = 'TasGrid_NoteFilterTemplates';
+
+export const loadNoteFilterTemplates = async () => {
+    if (!pb.authStore.isValid) return;
+    try {
+        const records = await pb.collection(NOTE_FILTER_TEMPLATES_COLLECTION).getFullList({
+            filter: `user = "${pb.authStore.model?.id}"`,
+            requestKey: null
+        });
+        const templates: FilterTemplate[] = records.map(r => ({
+            id: r.id,
+            name: r.name,
+            filter: r.filter as Filter
+        }));
+        setStore("filterTemplates", templates);
+    } catch (err) {
+        console.error("Failed to load note filter templates:", err);
+    }
+};
+
+export const saveNoteFilterTemplate = async (name: string) => {
+    if (!pb.authStore.isValid) return;
+    try {
+        const record = await pb.collection(NOTE_FILTER_TEMPLATES_COLLECTION).create({
+            user: pb.authStore.model?.id,
+            name,
+            filter: store.noteFilter
+        }, { requestKey: null });
+
+        const newTemplate: FilterTemplate = {
+            id: record.id,
+            name: record.name,
+            filter: record.filter as Filter
+        };
+
+        setStore("filterTemplates", prev => [...prev, newTemplate]);
+        toast.success(`Note filter template "${name}" saved`);
+    } catch (err) {
+        console.error("Failed to save note filter template:", err);
+        toast.error("Failed to save note filter template.");
+    }
+};
+
+export const applyNoteFilterTemplate = (id: string) => {
+    const template = store.filterTemplates.find(t => t.id === id);
+    if (template) {
+        setNoteFilter(template.filter);
+        toast.success(`Applied note filter: ${template.name}`);
+    }
+};
+
+export const removeNoteFilterTemplate = async (id: string) => {
+    if (!pb.authStore.isValid) return;
+    try {
+        await pb.collection(NOTE_FILTER_TEMPLATES_COLLECTION).delete(id);
+        setStore("filterTemplates", prev => prev.filter(t => t.id !== id));
+        toast.success("Note filter template deleted");
+    } catch (err) {
+        console.error("Failed to delete note filter template:", err);
+        toast.error("Failed to delete note filter template.");
+    }
+};
+
+export const clearNoteFilter = () => {
+    setStore("noteFilter", {
+        query: "",
+        tags: [],
+        priorityMin: 1,
+        priorityMax: 10,
+        urgencyMin: 1,
+        urgencyMax: 10,
+        editedToday: false,
+        ownedByMe: false,
+        starred: false,
+        jobStatus: [],
+        jobDivision: []
+    });
+    syncPreferences();
+};
+
 // Legacy cleanup - We don't need local storage persistence setup anymore
 export const setupPersistence = () => {
     // Moved logic to initStore which is called on auth.

src/views/CriticalView.tsx

@@ -28,10 +28,10 @@ export const CriticalView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ranked by highest urgency + priority.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/views/DigInView.tsx

@@ -33,10 +33,10 @@ export const DigInView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Largest tasks first. Tackle big projects head-on.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/views/PriorityView.tsx

@@ -28,10 +28,10 @@ export const PriorityView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by priority.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/views/ProgressView.tsx

@@ -35,10 +35,10 @@ export const ProgressView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Tasks sorted by progress status, then by focus score.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/views/SettingsView.tsx

@@ -1,6 +1,6 @@
 import { type Component, For, Show, createSignal, lazy, Suspense } from "solid-js";
 import { ThemeToggle } from "../components/ThemeToggle";
-import { store, restoreTask, deleteTaskPermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription } from "@/store";
+import { store, restoreTask, deleteTaskPermanently, restoreNote, deleteNotePermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription } from "@/store";
 import { useTheme } from "@/components/ThemeProvider";
 import { Trash2, Undo2, ArrowLeftRight, Tag, ChevronDown, ChevronRight, Share2, Users, HelpCircle, Copy, Plus, Type, Upload, Box, Edit2, Archive } from "lucide-solid";
 import { TagPicker } from "@/components/TagPicker";
@@ -77,7 +77,7 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                 </div>
             </header>
 
-            <div class="flex flex-col gap-12">
+            <div class="flex flex-col gap-12 mt-4">
 
 
                 {/* Resources Category (Mostly for Mobile) */}
@@ -826,51 +826,104 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                             </div>
 
                             <Show when={isTrashOpen()}>
-                                <div class="space-y-2 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
-                                    <For each={store.tasks.filter(t => t.deletedAt)} fallback={
-                                        <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
-                                            Trash is empty.
-                                        </div>
-                                    }>
-                                        {(task) => {
-                                            const daysLeft = Math.ceil(((task.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
-                                            return (
-                                                <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
-                                                    <div class="min-w-0 flex-1 px-1">
-                                                        <p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
-                                                        <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
+                                <div class="space-y-6 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
+                                    {/* Tasks Trash */}
+                                    <div class="space-y-2">
+                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pl-1">Tasks</h4>
+                                        <For each={store.tasks.filter(t => t.deletedAt)} fallback={
+                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] italic border border-dashed border-border/40 rounded-xl bg-muted/5 uppercase tracking-widest">
+                                                No trashed tasks.
+                                            </div>
+                                        }>
+                                            {(task) => {
+                                                const daysLeft = Math.ceil(((task.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
+                                                return (
+                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
+                                                        <div class="min-w-0 flex-1 px-1">
+                                                            <p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
+                                                            <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
+                                                        </div>
+                                                        <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
+                                                            <Button
+                                                                variant="secondary"
+                                                                size="sm"
+                                                                class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
+                                                                onClick={() => {
+                                                                    restoreTask(task.id);
+                                                                    toast.success("Task restored");
+                                                                }}
+                                                            >
+                                                                <Undo2 size={14} class="mr-2" />
+                                                                Recover
+                                                            </Button>
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
+                                                                onClick={() => {
+                                                                    if (confirm("Permanently delete this task? This cannot be undone.")) {
+                                                                        deleteTaskPermanently(task.id);
+                                                                        toast.error("Task permanently deleted");
+                                                                    }
+                                                                }}
+                                                            >
+                                                                <Trash2 size={14} />
+                                                            </Button>
+                                                        </div>
                                                     </div>
-                                                    <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
-                                                        <Button
-                                                            variant="secondary"
-                                                            size="sm"
-                                                            class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
-                                                            onClick={() => {
-                                                                restoreTask(task.id);
-                                                                toast.success("Task restored");
-                                                            }}
-                                                        >
-                                                            <Undo2 size={14} class="mr-2" />
-                                                            Recover
-                                                        </Button>
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="icon"
-                                                            class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
-                                                            onClick={() => {
-                                                                if (confirm("Permanently delete this task? This cannot be undone.")) {
-                                                                    deleteTaskPermanently(task.id);
-                                                                    toast.error("Task permanently deleted");
-                                                                }
-                                                            }}
-                                                        >
-                                                            <Trash2 size={14} />
-                                                        </Button>
+                                                );
+                                            }}
+                                        </For>
+                                    </div>
+
+                                    {/* Notes Trash */}
+                                    <div class="space-y-2">
+                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pl-1">Notes</h4>
+                                        <For each={store.notes.filter(n => n.deletedAt)} fallback={
+                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] italic border border-dashed border-border/40 rounded-xl bg-muted/5 uppercase tracking-widest">
+                                                No trashed notes.
+                                            </div>
+                                        }>
+                                            {(note) => {
+                                                const daysLeft = Math.ceil(((note.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
+                                                return (
+                                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
+                                                        <div class="min-w-0 flex-1 px-1">
+                                                            <p class="font-semibold truncate text-sm sm:text-base">{note.title || "Untitled"}</p>
+                                                            <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
+                                                        </div>
+                                                        <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
+                                                            <Button
+                                                                variant="secondary"
+                                                                size="sm"
+                                                                class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
+                                                                onClick={() => {
+                                                                    restoreNote(note.id);
+                                                                    toast.success("Note restored");
+                                                                }}
+                                                            >
+                                                                <Undo2 size={14} class="mr-2" />
+                                                                Recover
+                                                            </Button>
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
+                                                                onClick={() => {
+                                                                    if (confirm("Permanently delete this note? This cannot be undone.")) {
+                                                                        deleteNotePermanently(note.id);
+                                                                        toast.error("Note permanently deleted");
+                                                                    }
+                                                                }}
+                                                            >
+                                                                <Trash2 size={14} />
+                                                            </Button>
+                                                        </div>
                                                     </div>
-                                                </div>
-                                            );
-                                        }}
-                                    </For>
+                                                );
+                                            }}
+                                        </For>
+                                    </div>
                                 </div>
                             </Show>
                         </section>
@@ -1033,6 +1086,53 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                     </div>
                 </div>
             </div>
+
+            <footer class="pt-40 pb-20 flex flex-col items-center gap-4">
+                <div class="flex items-center gap-2">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        class="h-8 gap-2 text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity"
+                        onClick={async () => {
+                            const { updateAndReloadApp } = await import('@/components/PwaUpdater');
+                            toast.success("Updating app...");
+                            updateAndReloadApp();
+                        }}
+                    >
+                        <Upload class="rotate-180" size={14} />
+                        Update App
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        class="h-8 gap-2 text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity"
+                        onClick={async () => {
+                            if (!confirm("Reset PWA? This will clear offline data and reload.")) return;
+                            try {
+                                const registrations = await navigator.serviceWorker?.getRegistrations?.();
+                                if (registrations) {
+                                    await Promise.all(registrations.map(r => r.unregister()));
+                                }
+                                if ('caches' in window) {
+                                    const keys = await caches.keys();
+                                    await Promise.all(keys.map(k => caches.delete(k)));
+                                }
+                                toast.success("PWA reset. Reloading...");
+                                window.location.reload();
+                            } catch (err) {
+                                console.error("Failed to reset PWA", err);
+                                toast.error("Failed to reset PWA");
+                            }
+                        }}
+                    >
+                        <Trash2 size={14} />
+                        Reset PWA
+                    </Button>
+                </div>
+                <p class="text-[0.5rem] font-mono text-muted-foreground/60 uppercase tracking-[0.2em]">
+                    Tasgrid v{__APP_VERSION__}
+                </p>   {/* Versioning System: v[breaking update].[user-facing update].[patch/backend updated] */}
+            </footer>
         </div>
     );
 };

src/views/SnowballView.tsx

@@ -33,10 +33,10 @@ export const SnowballView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Smallest tasks first. Build momentum with quick wins.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/views/UrgencyView.tsx

@@ -32,10 +32,10 @@ export const UrgencyView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by deadline.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}

src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;

test-embed.html

@@ -113,6 +113,22 @@
     <h1>TasGrid Parent App Simulator</h1>
 
     <div class="controls">
+        <div id="env-settings" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
+            <p style="font-size: 13px; color: #666; margin-top: 0;"><strong>Target Environment:</strong></p>
+            <label style="margin-right: 15px; cursor: pointer;">
+                <input type="radio" name="envToggle" value="https://tasgrid.ccllc.pro" checked onchange="updateEnv()">
+                Production (tasgrid.ccllc.pro)
+            </label>
+            <label style="margin-right: 15px; cursor: pointer;">
+                <input type="radio" name="envToggle" value="http://localhost:4000" onchange="updateEnv()">
+                Localhost:4000
+            </label>
+            <label style="cursor: pointer;">
+                <input type="radio" name="envToggle" value="http://localhost:4001" onchange="updateEnv()">
+                Localhost:4001
+            </label>
+        </div>
+
         <div id="login-section">
             <h3>Login to Parent Application</h3>
             <p>This simulates the parent application authenticating with the shared backend.</p>
@@ -132,12 +148,23 @@
                 <button onclick="loadSpecificNote()" style="padding: 8px 16px; cursor: pointer;">Load Note</button>
             </div>
 
-            <p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Test API Creation:</strong></p>
-            <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-                <input type="text" id="new-note-title" style="flex: 1; padding: 8px;" placeholder="New Note Title...">
-                <button onclick="createNoteViaAPI()"
-                    style="padding: 8px 16px; cursor: pointer; background: #28a745; color: white; border: none; border-radius: 4px; font-weight: bold;">Create
-                    & Open Note</button>
+            <p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Test Headless SDK (Centralized
+                    Logic):</strong></p>
+            <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;">
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="sdk-task-title" style="flex: 1; padding: 8px;"
+                        placeholder="New Task Title...">
+                    <button onclick="createTaskViaSDK()"
+                        style="padding: 8px 16px; cursor: pointer; background: #6f42c1; color: white; border: none; border-radius: 4px; font-weight: bold;">Create
+                        Task via SDK</button>
+                </div>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="sdk-note-title" style="flex: 1; padding: 8px;"
+                        placeholder="New Note Title...">
+                    <button onclick="createNoteViaSDK()"
+                        style="padding: 8px 16px; cursor: pointer; background: #fd7e14; color: white; border: none; border-radius: 4px; font-weight: bold;">Create
+                        Note via SDK</button>
+                </div>
             </div>
 
             <p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Manual Auth:</strong></p>
@@ -157,44 +184,46 @@
                         <li><code>/embed/quick-add</code>: Renders a standalone task creation form.</li>
                     </ul>
 
-                    <p><strong>2. Creating Notes Programmatically (API):</strong></p>
-                    <p>Before embedding, a sister app can create a Note via PocketBase API to retrieve a new
-                        <code>noteId</code>. By default, notes should have an array of <code>tags</code> and a
-                        <code>title</code>.
+                    <p><strong>2. Programmatic Creation (TasGrid SDK):</strong></p>
+                    <p>The recommended way to create entries is using the <code>tasgrid-sdk.js</code> module. This
+                        ensures all TasGrid-specific defaults and date logic (like urgency decay) are handled correctly.
                     </p>
-                    <p><em>Using the PocketBase JS SDK:</em></p>
+
+                    <p><em>Setup:</em></p>
                     <pre
                         style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
-const record = await pb.collection('TasGrid_Notes').create({
-    title: "Sister App Payload",
-    content: "&lt;p&gt;Initial content here...&lt;/p&gt;",
-    tags: ["sister_app_export"],
+import { createTasgridTask, createTasgridNote } from 'https://tasgrid.ccllc.pro/tasgrid-sdk.js';</pre>
+
+                    <div style="border-left: 4px solid #6f42c1; padding-left: 15px; margin: 20px 0;">
+                        <p><strong>A. Creating a TASK:</strong></p>
+                        <p style="font-size: 12px; color: #666; margin-top: -10px;">Use this for items that need status,
+                            priority, and automated due date calculation.</p>
+                        <pre
+                            style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
+const task = await createTasgridTask(pb, {
+    title: "Urgent Task",
+    urgency: 10,   // Automated: 10=Today, 5=Next Week, 1=Six Months
+    priority: 8,   // 1-10
+    size: 3,       // Default: 3 (1 hour). Range 0-10.
+    tags: ["external"],
+    owner: "USER_ID" // Optional
+});</pre>
+                    </div>
+
+                    <div style="border-left: 4px solid #fd7e14; padding-left: 15px; margin: 20px 0;">
+                        <p><strong>B. Creating a NOTE:</strong></p>
+                        <p style="font-size: 12px; color: #666; margin-top: -10px;">Use this for long-form content or
+                            documentation without a deadline.</p>
+                        <pre
+                            style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
+const note = await createTasgridNote(pb, {
+    title: "Project Brief",
+    content: "&lt;p&gt;HTML content here...&lt;/p&gt;",
+    tags: ["documentation"],
     isPrivate: false,
-    user: pb.authStore.model.id, // Must be authenticated user ID
-    tasks: [] // Optional array of linked task IDs
-});
-const newNoteId = record.id;
-// Then iframe to /embed/notes?noteId=${newNoteId}
-</pre>
-                    <p><em>Using standard REST API (fetch):</em></p>
-                    <pre
-                        style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
-const res = await fetch('https://pocketbase.ccllc.pro/api/collections/TasGrid_Notes/records', {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'YOUR_PB_AUTH_TOKEN'
-    },
-    body: JSON.stringify({
-        title: "REST Custom Note",
-        user: "YOUR_USER_ID",
-        tags: [],
-        tasks: [],
-        isPrivate: false
-    })
-});
-const data = await res.json();
-const newNoteId = data.id;</pre>
+    tasks: [] // Optional: Array of Task IDs to link
+});</pre>
+                    </div>
 
                     <p><strong>3. Authentication Protocol:</strong></p>
                     <p>The parent application must send a <code>postMessage</code> to the iframe immediately after the
@@ -232,7 +261,7 @@ function syncAuth(iframe) {
                 <span>Notes Embed</span>
                 <code style="font-size: 10px;">/embed/notes</code>
             </div>
-            <iframe id="notes-iframe" src="http://localhost:4000/embed/notes" onload="syncAuthOnLoad(this)"></iframe>
+            <iframe id="notes-iframe" onload="syncAuthOnLoad(this)"></iframe>
         </div>
 
         <div class="iframe-container">
@@ -241,14 +270,36 @@ function syncAuth(iframe) {
                 <span>Quick Add Embed</span>
                 <code style="font-size: 10px;">/embed/quick-add</code>
             </div>
-            <iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"
-                onload="syncAuthOnLoad(this)"></iframe>
+            <iframe id="quick-add-iframe" onload="syncAuthOnLoad(this)"></iframe>
         </div>
     </div>
 
     <script>
         const pb = new PocketBase('https://pocketbase.ccllc.pro');
         const statusEl = document.getElementById('status');
+        let ENV_URL = 'https://tasgrid.ccllc.pro';
+
+        function updateEnv() {
+            const selected = document.querySelector('input[name="envToggle"]:checked').value;
+            ENV_URL = selected;
+
+            // Reload iframes with new base URL
+            const notesIframe = document.getElementById('notes-iframe');
+            const noteId = document.getElementById('note-id-input')?.value.trim();
+            if (noteId) {
+                notesIframe.src = `${ENV_URL}/embed/notes?noteId=${noteId}`;
+            } else {
+                notesIframe.src = `${ENV_URL}/embed/notes`;
+            }
+
+            document.getElementById('quick-add-iframe').src = `${ENV_URL}/embed/quick-add`;
+            console.log(`Switched target environment to: ${ENV_URL}`);
+        }
+
+        // Initialize iframes on load
+        window.addEventListener('DOMContentLoaded', () => {
+            updateEnv();
+        });
 
         function syncAuthOnLoad(iframe) {
             console.log(`Iframe ${iframe.id} loaded, checking auth sync...`);
@@ -262,46 +313,68 @@ function syncAuth(iframe) {
             const id = document.getElementById('note-id-input').value.trim();
             const iframe = document.getElementById('notes-iframe');
             if (id) {
-                iframe.src = `http://localhost:4000/embed/notes?noteId=${id}`;
+                iframe.src = `${ENV_URL}/embed/notes?noteId=${id}`;
             } else {
-                iframe.src = `http://localhost:4000/embed/notes`;
+                iframe.src = `${ENV_URL}/embed/notes`;
             }
         }
 
-        async function createNoteViaAPI() {
-            const title = document.getElementById('new-note-title').value.trim() || 'API Generated Note';
+        async function createTaskViaSDK() {
+            const title = document.getElementById('sdk-task-title').value.trim() || 'SDK Generated Task';
             if (!pb.authStore.isValid) {
-                alert("Please log in first before creating a note via API.");
+                alert("Please log in first before creating a task via SDK.");
                 return;
             }
 
             statusEl.className = 'status';
-            statusEl.textContent = 'Creating note via API...';
+            statusEl.textContent = 'Importing SDK and creating task...';
             statusEl.style.display = 'block';
 
             try {
-                // Using PocketBase SDK to mimic a REST API call from sister app
-                const record = await pb.collection('TasGrid_Notes').create({
+                const { createTasgridTask } = await import(`${ENV_URL}/tasgrid-sdk.js`);
+
+                const record = await createTasgridTask(pb, {
                     title: title,
-                    content: "<p>This note was created automatically via the API script!</p>",
-                    tags: ["api_generated"],
-                    isPrivate: false,
-                    user: pb.authStore.model.id,
-                    tasks: []
+                    priority: 8,
+                    urgency: 4,
+                    tags: ["sdk_test"],
+                    content: "This task was created by a sister app using the imported Headless SDK!"
                 });
 
                 statusEl.className = 'status success';
-                statusEl.textContent = `Note created successfully (ID: ${record.id})! Loading iframe...`;
-
-                // Automatically set the new ID in the deep link input
-                document.getElementById('note-id-input').value = record.id;
-
-                // Automatically load it
-                loadSpecificNote();
-
+                statusEl.textContent = `Task created successfully via SDK (ID: ${record.id})!`;
             } catch (err) {
                 statusEl.className = 'status error';
-                statusEl.textContent = 'Failed to create note: ' + err.message;
+                statusEl.textContent = 'Failed to create task via SDK: ' + err.message;
+            }
+        }
+
+        async function createNoteViaSDK() {
+            const title = document.getElementById('sdk-note-title').value.trim() || 'SDK Generated Note';
+            if (!pb.authStore.isValid) {
+                alert("Please log in first before creating a note via SDK.");
+                return;
+            }
+
+            statusEl.className = 'status';
+            statusEl.textContent = 'Importing SDK and creating note...';
+            statusEl.style.display = 'block';
+
+            try {
+                const { createTasgridNote } = await import(`${ENV_URL}/tasgrid-sdk.js`);
+
+                const record = await createTasgridNote(pb, {
+                    title: title,
+                    content: "<p>This note was created headlessly via the SDK!</p>",
+                    tags: ["sdk_test"],
+                    isPrivate: false
+                });
+
+                statusEl.className = 'status success';
+                statusEl.textContent = `Note created successfully via SDK (ID: ${record.id})!`;
+            } catch (err) {
+                statusEl.className = 'status error';
+                statusEl.textContent = 'Failed to create note via SDK: ' + err.message;
             }
         }
 

tsconfig.app.json

@@ -10,7 +10,9 @@
       "DOM.Iterable"
     ],
     "types": [
-      "vite/client"
+      "vite/client",
+      "vite-plugin-pwa/client",
+      "vite-plugin-pwa/solid"
     ],
     "skipLibCheck": true,
     /* Bundler mode */

vite.config.ts

@@ -3,13 +3,21 @@ import solid from 'vite-plugin-solid'
 import { VitePWA } from 'vite-plugin-pwa'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
+import { readFileSync } from 'fs'
+
+const packageJson = JSON.parse(
+  readFileSync(new URL('./package.json', import.meta.url), 'utf-8')
+);
 
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
   plugins: [
     solid(),
     tailwindcss(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       includeAssets: ['icon.webp', 'vite.svg'],
       manifest: {
         name: 'Tasgrid',
@@ -44,6 +52,7 @@ export default defineConfig({
         runtimeCaching: [
           {
             urlPattern: /^https:\/\/pocketbase\.ccllc\.pro\/api\/.*/i,
+            method: 'GET',
             handler: 'NetworkFirst',
             options: {
               cacheName: 'api-cache',
@@ -63,6 +72,10 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 4000,
+    cors: { origin: '*' },
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    },
     allowedHosts: [
       'tasgrid.ccllc.pro'
     ]
@@ -72,4 +85,4 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src")
     }
   }
-})
+})