feat/add-pinned-tabs-functionality

apps/desktop/src/components/main/body/ai.tsx

@@ -19,6 +19,8 @@ export const TabItemAI: TabItem<Extract<Tab, { type: "ai" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   const suffix = tab.state.tab === "transcription" ? "STT" : "LLM";
 
@@ -32,11 +34,14 @@ export const TabItemAI: TabItem<Extract<Tab, { type: "ai" }>> = ({
         </div>
       }
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/calendar/index.tsx

@@ -12,17 +12,22 @@ export const TabItemCalendar: TabItem<Extract<Tab, { type: "calendar" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<CalendarDays className="w-4 h-4" />}
       title={"Calendar"}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/changelog/index.tsx

@@ -16,16 +16,21 @@ export const TabItemChangelog: TabItem<Extract<Tab, { type: "changelog" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => (
   <TabItemBase
     icon={<SparklesIcon className="w-4 h-4" />}
     title="What's New"
     selected={tab.active}
+    pinned={tab.pinned}
     tabIndex={tabIndex}
     handleCloseThis={() => handleCloseThis(tab)}
     handleSelectThis={() => handleSelectThis(tab)}
     handleCloseOthers={handleCloseOthers}
     handleCloseAll={handleCloseAll}
+    handlePinThis={() => handlePinThis(tab)}
+    handleUnpinThis={() => handleUnpinThis(tab)}
   />
 );
 

apps/desktop/src/components/main/body/chat-shortcuts/index.tsx

@@ -27,17 +27,22 @@ export const TabItemChatShortcut: TabItem<
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<MessageSquare className="w-4 h-4" />}
       title="Shortcuts"
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/contacts/index.tsx

@@ -24,17 +24,22 @@ export const TabItemContact: TabItem<Extract<Tab, { type: "contacts" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<Contact2Icon className="w-4 h-4" />}
       title={"Contacts"}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/data.tsx

@@ -19,6 +19,8 @@ export const TabItemData: TabItem<Extract<Tab, { type: "data" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   const suffix = tab.state.tab === "import" ? "Import" : "Export";
 
@@ -32,11 +34,14 @@ export const TabItemData: TabItem<Extract<Tab, { type: "data" }>> = ({
         </div>
       }
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/empty/index.tsx

@@ -16,17 +16,22 @@ export const TabItemEmpty: TabItem<Extract<Tab, { type: "empty" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<FileIcon className="w-4 h-4" />}
       title="New tab"
       selected={tab.active}
+      allowPin={false}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/events.tsx

@@ -12,6 +12,8 @@ export const TabItemEvent: TabItem<Extract<Tab, { type: "events" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   const title = main.UI.useCell(
     "events",
@@ -25,11 +27,14 @@ export const TabItemEvent: TabItem<Extract<Tab, { type: "events" }>> = ({
       icon={<CalendarIcon className="w-4 h-4" />}
       title={title ?? ""}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/extensions/index.tsx

@@ -1,9 +1,7 @@
 import { convertFileSrc } from "@tauri-apps/api/core";
-import { AlertTriangleIcon, BlocksIcon, PuzzleIcon, XIcon } from "lucide-react";
-import { Reorder, useDragControls } from "motion/react";
+import { AlertTriangleIcon, BlocksIcon, PuzzleIcon } from "lucide-react";
 import {
   Component,
-  type PointerEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -14,19 +12,11 @@ import type { MergeableStore } from "tinybase";
 import { useStores } from "tinybase/ui-react";
 
 import { Button } from "@hypr/ui/components/ui/button";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@hypr/ui/components/ui/context-menu";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@hypr/ui/components/ui/resizable";
-import { cn } from "@hypr/utils";
 
 import { createIframeSynchronizer } from "../../../../store/tinybase/iframe-sync";
 import { type Store, STORE_ID } from "../../../../store/tinybase/main";
@@ -47,17 +37,22 @@ export const TabItemExtensions: TabItem<ExtensionsTab> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<BlocksIcon className="w-4 h-4" />}
       title={"Extensions"}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };
@@ -171,65 +166,32 @@ export function TabItemExtension({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }: {
   tab: ExtensionTab;
   tabIndex?: number;
   handleCloseThis: (tab: Tab) => void;
   handleSelectThis: (tab: Tab) => void;
   handleCloseOthers: () => void;
   handleCloseAll: () => void;
+  handlePinThis: () => void;
+  handleUnpinThis: () => void;
 }) {
-  const controls = useDragControls();
-
   return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <Reorder.Item
-          value={tab}
-          dragListener={false}
-          dragControls={controls}
-          as="div"
-          className={cn([
-            "h-full flex items-center gap-1 px-2 rounded-lg cursor-pointer select-none",
-            "hover:bg-neutral-100",
-            tab.active && "bg-neutral-100",
-          ])}
-          onClick={() => handleSelectThis(tab)}
-          onPointerDown={(e: PointerEvent) => controls.start(e)}
-        >
-          <PuzzleIcon size={14} className="text-neutral-500 shrink-0" />
-          <span className="text-sm truncate max-w-[120px]">
-            {tab.extensionId}
-          </span>
-          {tabIndex && (
-            <span className="text-xs text-neutral-400 shrink-0">
-              {tabIndex}
-            </span>
-          )}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-5 shrink-0"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleCloseThis(tab);
-            }}
-          >
-            <XIcon size={12} />
-          </Button>
-        </Reorder.Item>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onClick={() => handleCloseThis(tab)}>
-          Close
-        </ContextMenuItem>
-        <ContextMenuItem onClick={handleCloseOthers}>
-          Close Others
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem onClick={handleCloseAll}>Close All</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+    <TabItemBase
+      icon={<PuzzleIcon className="w-4 h-4" />}
+      title={tab.extensionId}
+      selected={tab.active}
+      pinned={tab.pinned}
+      tabIndex={tabIndex}
+      handleCloseThis={() => handleCloseThis(tab)}
+      handleSelectThis={() => handleSelectThis(tab)}
+      handleCloseOthers={handleCloseOthers}
+      handleCloseAll={handleCloseAll}
+      handlePinThis={handlePinThis}
+      handleUnpinThis={handleUnpinThis}
+    />
   );
 }
 

apps/desktop/src/components/main/body/folders/index.tsx

@@ -36,17 +36,22 @@ const TabItemFolderAll: TabItem<Extract<Tab, { type: "folders" }>> = ({
   handleSelectThis,
   handleCloseAll,
   handleCloseOthers,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   return (
     <TabItemBase
       icon={<FoldersIcon className="w-4 h-4" />}
       title={"Folders"}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };
@@ -58,6 +63,8 @@ const TabItemFolderSpecific: TabItem<Extract<Tab, { type: "folders" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   const folderId = tab.id!;
   const folders = useFolderChain(folderId);
@@ -71,11 +78,14 @@ const TabItemFolderSpecific: TabItem<Extract<Tab, { type: "folders" }>> = ({
       icon={<FolderIcon className="w-4 h-4" />}
       title={title}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };

apps/desktop/src/components/main/body/humans.tsx

@@ -12,6 +12,8 @@ export const TabItemHuman: TabItem<Extract<Tab, { type: "humans" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
+  handlePinThis,
+  handleUnpinThis,
 }) => {
   const title = main.UI.useCell("humans", tab.id, "name", main.STORE_ID);
 
@@ -20,11 +22,14 @@ export const TabItemHuman: TabItem<Extract<Tab, { type: "humans" }>> = ({
       icon={<UserIcon className="w-4 h-4" />}
       title={title ?? "Human"}
       selected={tab.active}
+      pinned={tab.pinned}
       tabIndex={tabIndex}
       handleCloseThis={() => handleCloseThis(tab)}
       handleSelectThis={() => handleSelectThis(tab)}
       handleCloseOthers={handleCloseOthers}
       handleCloseAll={handleCloseAll}
+      handlePinThis={() => handlePinThis(tab)}
+      handleUnpinThis={() => handleUnpinThis(tab)}
     />
   );
 };