feat: add profile groups

2026-04-28 06:46:08 +02:00 · 2025-07-26 17:56:32 +04:00
parent f299eeaea5
commit 40ad32af6d
22 changed files with 1849 additions and 225 deletions
@@ -0,0 +1,115 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface CreateGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroupCreated: (group: ProfileGroup) => void;
+}
+
+export function CreateGroupDialog({
+  isOpen,
+  onClose,
+  onGroupCreated,
+}: CreateGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = useCallback(async () => {
+    if (!groupName.trim()) return;
+
+    setIsCreating(true);
+    setError(null);
+    try {
+      const newGroup = await invoke<ProfileGroup>("create_profile_group", {
+        name: groupName.trim(),
+      });
+
+      toast.success("Group created successfully");
+      onGroupCreated(newGroup);
+      setGroupName("");
+      onClose();
+    } catch (err) {
+      console.error("Failed to create group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to create group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [groupName, onGroupCreated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setGroupName("");
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New Group</DialogTitle>
+          <DialogDescription>
+            Create a new group to organize your browser profiles.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleCreate();
+                }
+              }}
+              disabled={isCreating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isCreating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isCreating}
+            onClick={() => void handleCreate()}
+            disabled={!groupName.trim()}
+          >
+            Create Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,209 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { BrowserProfile, ProfileGroup } from "@/types";
+
+interface DeleteGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupDeleted: () => void;
+}
+
+export function DeleteGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupDeleted,
+}: DeleteGroupDialogProps) {
+  const [associatedProfiles, setAssociatedProfiles] = useState<
+    BrowserProfile[]
+  >([]);
+  const [deleteAction, setDeleteAction] = useState<"move" | "delete">("move");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadAssociatedProfiles = useCallback(async () => {
+    if (!group) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const allProfiles = await invoke<BrowserProfile[]>(
+        "list_browser_profiles",
+      );
+      const groupProfiles = allProfiles.filter(
+        (profile) => profile.group_id === group.id,
+      );
+      setAssociatedProfiles(groupProfiles);
+    } catch (err) {
+      console.error("Failed to load associated profiles:", err);
+      setError(err instanceof Error ? err.message : "Failed to load profiles");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [group]);
+
+  useEffect(() => {
+    if (isOpen && group) {
+      void loadAssociatedProfiles();
+    }
+  }, [isOpen, group, loadAssociatedProfiles]);
+
+  const handleDelete = useCallback(async () => {
+    if (!group) return;
+
+    setIsDeleting(true);
+    setError(null);
+    try {
+      if (deleteAction === "delete" && associatedProfiles.length > 0) {
+        // Delete all associated profiles first
+        const profileNames = associatedProfiles.map((p) => p.name);
+        await invoke("delete_selected_profiles", { profileNames });
+      } else if (deleteAction === "move" && associatedProfiles.length > 0) {
+        // Move profiles to default group (null group_id)
+        const profileNames = associatedProfiles.map((p) => p.name);
+        await invoke("assign_profiles_to_group", {
+          profileNames,
+          groupId: null,
+        });
+      }
+
+      // Delete the group
+      await invoke("delete_profile_group", { groupId: group.id });
+
+      toast.success("Group deleted successfully");
+      onGroupDeleted();
+      onClose();
+    } catch (err) {
+      console.error("Failed to delete group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to delete group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [group, deleteAction, associatedProfiles, onGroupDeleted, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    setDeleteAction("move");
+    setAssociatedProfiles([]);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete Group</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete the group
+            "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {isLoading ? (
+            <div className="text-sm text-muted-foreground">
+              Loading associated profiles...
+            </div>
+          ) : (
+            <>
+              {associatedProfiles.length > 0 && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label>
+                      Associated Profiles ({associatedProfiles.length})
+                    </Label>
+                    <ScrollArea className="h-32 w-full border rounded-md p-3">
+                      <div className="space-y-1">
+                        {associatedProfiles.map((profile) => (
+                          <div key={profile.id} className="text-sm">
+                            • {profile.name}
+                          </div>
+                        ))}
+                      </div>
+                    </ScrollArea>
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label>What should happen to these profiles?</Label>
+                    <RadioGroup
+                      value={deleteAction}
+                      onValueChange={(value) =>
+                        setDeleteAction(value as "move" | "delete")
+                      }
+                    >
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="move" id="move" />
+                        <Label htmlFor="move" className="text-sm">
+                          Move profiles to Default group
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="delete" id="delete" />
+                        <Label
+                          htmlFor="delete"
+                          className="text-sm text-red-600"
+                        >
+                          Delete profiles along with the group
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </div>
+                </div>
+              )}
+
+              {associatedProfiles.length === 0 && !isLoading && (
+                <div className="text-sm text-muted-foreground">
+                  This group has no associated profiles.
+                </div>
+              )}
+            </>
+          )}
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <LoadingButton
+            variant="destructive"
+            isLoading={isDeleting}
+            onClick={() => void handleDelete()}
+            disabled={isLoading}
+          >
+            Delete Group
+            {deleteAction === "delete" &&
+              associatedProfiles.length > 0 &&
+              " & Profiles"}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,125 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface EditGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupUpdated: (group: ProfileGroup) => void;
+}
+
+export function EditGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupUpdated,
+}: EditGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (group) {
+      setGroupName(group.name);
+    } else {
+      setGroupName("");
+    }
+    setError(null);
+  }, [group]);
+
+  const handleUpdate = useCallback(async () => {
+    if (!group || !groupName.trim()) return;
+
+    setIsUpdating(true);
+    setError(null);
+    try {
+      const updatedGroup = await invoke<ProfileGroup>("update_profile_group", {
+        groupId: group.id,
+        name: groupName.trim(),
+      });
+
+      toast.success("Group updated successfully");
+      onGroupUpdated(updatedGroup);
+      onClose();
+    } catch (err) {
+      console.error("Failed to update group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to update group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsUpdating(false);
+    }
+  }, [group, groupName, onGroupUpdated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Group</DialogTitle>
+          <DialogDescription>
+            Update the name of the group "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleUpdate();
+                }
+              }}
+              disabled={isUpdating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isUpdating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isUpdating}
+            onClick={() => void handleUpdate()}
+            disabled={!groupName.trim() || groupName === group?.name}
+          >
+            Update Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,178 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ProfileGroup } from "@/types";
+
+interface GroupAssignmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProfiles: string[];
+  onAssignmentComplete: () => void;
+}
+
+export function GroupAssignmentDialog({
+  isOpen,
+  onClose,
+  selectedProfiles,
+  onAssignmentComplete,
+}: GroupAssignmentDialogProps) {
+  const [groups, setGroups] = useState<ProfileGroup[]>([]);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isAssigning, setIsAssigning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleAssign = useCallback(async () => {
+    setIsAssigning(true);
+    setError(null);
+    try {
+      await invoke("assign_profiles_to_group", {
+        profileNames: selectedProfiles,
+        groupId: selectedGroupId,
+      });
+
+      const groupName = selectedGroupId
+        ? groups.find((g) => g.id === selectedGroupId)?.name || "Unknown Group"
+        : "Default";
+
+      toast.success(
+        `Successfully assigned ${selectedProfiles.length} profile(s) to ${groupName}`,
+      );
+      onAssignmentComplete();
+      onClose();
+    } catch (err) {
+      console.error("Failed to assign profiles to group:", err);
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "Failed to assign profiles to group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsAssigning(false);
+    }
+  }, [
+    selectedProfiles,
+    selectedGroupId,
+    groups,
+    onAssignmentComplete,
+    onClose,
+  ]);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+      setSelectedGroupId(null);
+      setError(null);
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Assign to Group</DialogTitle>
+          <DialogDescription>
+            Assign {selectedProfiles.length} selected profile(s) to a group.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Selected Profiles:</Label>
+            <div className="p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
+              <ul className="text-sm space-y-1">
+                {selectedProfiles.map((profileName) => (
+                  <li key={profileName} className="truncate">
+                    • {profileName}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="group-select">Assign to Group:</Label>
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : (
+              <Select
+                value={selectedGroupId || "default"}
+                onValueChange={(value) => {
+                  setSelectedGroupId(value === "default" ? null : value);
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a group" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">Default (No Group)</SelectItem>
+                  {groups.map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isAssigning}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isAssigning}
+            onClick={() => void handleAssign()}
+            disabled={isLoading}
+          >
+            Assign
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,51 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { GroupWithCount } from "@/types";
+
+interface GroupBadgesProps {
+  selectedGroupId: string | null;
+  onGroupSelect: (groupId: string | null) => void;
+  refreshTrigger?: number;
+  groups: GroupWithCount[];
+  isLoading: boolean;
+}
+
+export function GroupBadges({
+  selectedGroupId,
+  onGroupSelect,
+  groups,
+  isLoading,
+}: GroupBadgesProps) {
+  if (isLoading) {
+    return (
+      <div className="flex flex-wrap gap-2 mb-4">
+        <div className="text-sm text-muted-foreground">Loading groups...</div>
+      </div>
+    );
+  }
+
+  if (groups.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 mb-4">
+      {groups.map((group) => (
+        <Badge
+          key={group.id}
+          variant={selectedGroupId === group.id ? "default" : "secondary"}
+          className="cursor-pointer hover:bg-primary/80 transition-colors flex items-center gap-2 px-3 py-1"
+          onClick={() => {
+            onGroupSelect(selectedGroupId === group.id ? null : group.id);
+          }}
+        >
+          <span>{group.name}</span>
+          <span className="bg-background/20 text-xs px-1.5 py-0.5 rounded-sm">
+            {group.count}
+          </span>
+        </Badge>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,207 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { GoPlus } from "react-icons/go";
+import { LuPencil, LuTrash2 } from "react-icons/lu";
+import { CreateGroupDialog } from "@/components/create-group-dialog";
+import { DeleteGroupDialog } from "@/components/delete-group-dialog";
+import { EditGroupDialog } from "@/components/edit-group-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { ProfileGroup } from "@/types";
+
+interface GroupManagementDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GroupManagementDialog({
+  isOpen,
+  onClose,
+}: GroupManagementDialogProps) {
+  const [groups, setGroups] = useState<ProfileGroup[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Dialog states
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedGroup, setSelectedGroup] = useState<ProfileGroup | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleGroupCreated = useCallback((newGroup: ProfileGroup) => {
+    setGroups((prev) => [...prev, newGroup]);
+  }, []);
+
+  const handleGroupUpdated = useCallback((updatedGroup: ProfileGroup) => {
+    setGroups((prev) =>
+      prev.map((group) =>
+        group.id === updatedGroup.id ? updatedGroup : group,
+      ),
+    );
+  }, []);
+
+  const handleGroupDeleted = useCallback(() => {
+    void loadGroups();
+  }, [loadGroups]);
+
+  const handleEditGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setEditDialogOpen(true);
+  }, []);
+
+  const handleDeleteGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Manage Profile Groups</DialogTitle>
+            <DialogDescription>
+              Create, edit, and delete profile groups. Profiles without a group
+              will appear in the "Default" group.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Create new group button */}
+            <div className="flex justify-between items-center">
+              <Label>Groups</Label>
+              <Button
+                size="sm"
+                onClick={() => setCreateDialogOpen(true)}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+                Create Group
+              </Button>
+            </div>
+
+            {error && (
+              <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            {/* Groups list */}
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : groups.length === 0 ? (
+              <div className="text-sm text-muted-foreground">
+                No groups created yet. Create your first group using the button
+                above.
+              </div>
+            ) : (
+              <div className="border rounded-md">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead className="w-24">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {groups.map((group) => (
+                      <TableRow key={group.id}>
+                        <TableCell className="font-medium">
+                          {group.name}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleEditGroup(group)}
+                            >
+                              <LuPencil className="w-4 h-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteGroup(group)}
+                            >
+                              <LuTrash2 className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <CreateGroupDialog
+        isOpen={createDialogOpen}
+        onClose={() => setCreateDialogOpen(false)}
+        onGroupCreated={handleGroupCreated}
+      />
+
+      <EditGroupDialog
+        isOpen={editDialogOpen}
+        onClose={() => setEditDialogOpen(false)}
+        group={selectedGroup}
+        onGroupUpdated={handleGroupUpdated}
+      />
+
+      <DeleteGroupDialog
+        isOpen={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        group={selectedGroup}
+        onGroupDeleted={handleGroupDeleted}
+      />
+    </>
+  );
+}
@@ -0,0 +1,139 @@
+import { FaDownload } from "react-icons/fa";
+import { FiWifi } from "react-icons/fi";
+import { GoGear, GoKebabHorizontal, GoPlus } from "react-icons/go";
+import { LuTrash2, LuUsers } from "react-icons/lu";
+import { Logo } from "./icons/logo";
+import { Button } from "./ui/button";
+import { CardTitle } from "./ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  selectedProfiles: string[];
+  onBulkGroupAssignment: () => void;
+  onBulkDelete: () => Promise<void>;
+  onSettingsDialogOpen: (open: boolean) => void;
+  onProxyManagementDialogOpen: (open: boolean) => void;
+  onGroupManagementDialogOpen: (open: boolean) => void;
+  onImportProfileDialogOpen: (open: boolean) => void;
+  onCreateProfileDialogOpen: (open: boolean) => void;
+};
+
+const HomeHeader = ({
+  selectedProfiles,
+  onBulkGroupAssignment,
+  onBulkDelete,
+  onSettingsDialogOpen,
+  onProxyManagementDialogOpen,
+  onGroupManagementDialogOpen,
+  onImportProfileDialogOpen,
+  onCreateProfileDialogOpen,
+}: Props) => {
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-3">
+        <Logo className="w-10 h-10" />
+        {selectedProfiles.length > 0 ? (
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">
+              {selectedProfiles.length} profile
+              {selectedProfiles.length !== 1 ? "s" : ""} selected
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onBulkGroupAssignment}
+                className="flex gap-2 items-center"
+              >
+                <LuUsers className="w-4 h-4" />
+                Assign to Group
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => void onBulkDelete()}
+                className="flex gap-2 items-center"
+              >
+                <LuTrash2 className="w-4 h-4" />
+                Delete Selected
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <CardTitle>Donut</CardTitle>
+        )}
+      </div>
+      <div className="flex gap-2 items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex gap-2 items-center"
+            >
+              <GoKebabHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => {
+                onSettingsDialogOpen(true);
+              }}
+            >
+              <GoGear className="mr-2 w-4 h-4" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onProxyManagementDialogOpen(true);
+              }}
+            >
+              <FiWifi className="mr-2 w-4 h-4" />
+              Proxies
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onGroupManagementDialogOpen(true);
+              }}
+            >
+              <LuUsers className="mr-2 w-4 h-4" />
+              Groups
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onImportProfileDialogOpen(true);
+              }}
+            >
+              <FaDownload className="mr-2 w-4 h-4" />
+              Import Profile
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <Button
+                size="sm"
+                onClick={() => {
+                  onCreateProfileDialogOpen(true);
+                }}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Create a new profile</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default HomeHeader;
@@ -10,9 +10,11 @@ import {
 } from "@tanstack/react-table";
 import { invoke } from "@tauri-apps/api/core";
 import * as React from "react";
+import { CiCircleCheck } from "react-icons/ci";
 import { IoEllipsisHorizontal } from "react-icons/io5";
 import { LuChevronDown, LuChevronUp } from "react-icons/lu";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
  Dialog,
  DialogContent,
@@ -67,6 +69,11 @@ interface ProfilesDataTableProps {
  runningProfiles: Set<string>;
  isUpdating?: (browser: string) => boolean;
  onReloadProxyData?: () => void | Promise<void>;
+  onDeleteSelectedProfiles?: (profileNames: string[]) => Promise<void>;
+  onAssignProfilesToGroup?: (profileNames: string[]) => void;
+  selectedGroupId?: string | null;
+  selectedProfiles?: string[];
+  onSelectedProfilesChange?: (profiles: string[]) => void;
 }

 export function ProfilesDataTable({
@@ -80,7 +87,11 @@ export function ProfilesDataTable({
  onConfigureCamoufox,
  runningProfiles,
  isUpdating = () => false,
-  onReloadProxyData,
+  onDeleteSelectedProfiles: _onDeleteSelectedProfiles,
+  onAssignProfilesToGroup,
+  selectedGroupId,
+  selectedProfiles: externalSelectedProfiles = [],
+  onSelectedProfilesChange,
 }: ProfilesDataTableProps) {
  const { getTableSorting, updateSorting, isLoaded } = useTableSorting();
  const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -95,6 +106,10 @@ export function ProfilesDataTable({
  const [deleteError, setDeleteError] = React.useState<string | null>(null);

  const [storedProxies, setStoredProxies] = React.useState<StoredProxy[]>([]);
+  const [selectedProfiles, setSelectedProfiles] = React.useState<Set<string>>(
+    new Set(externalSelectedProfiles),
+  );
+  const [showCheckboxes, setShowCheckboxes] = React.useState(false);

  // Helper function to check if a profile has a proxy
  const hasProxy = React.useCallback(
@@ -125,8 +140,21 @@ export function ProfilesDataTable({
    [storedProxies],
  );

+  // Filter data by selected group
+  const filteredData = React.useMemo(() => {
+    if (!selectedGroupId) return data;
+    if (selectedGroupId === "default") {
+      return data.filter((profile) => !profile.group_id);
+    }
+    return data.filter((profile) => profile.group_id === selectedGroupId);
+  }, [data, selectedGroupId]);
+
  // Use shared browser state hook
-  const browserState = useBrowserState(data, runningProfiles, isUpdating);
+  const browserState = useBrowserState(
+    filteredData,
+    runningProfiles,
+    isUpdating,
+  );

  // Load stored proxies
  const loadStoredProxies = React.useCallback(async () => {
@@ -144,12 +172,12 @@ export function ProfilesDataTable({
    }
  }, [browserState.isClient, loadStoredProxies]);

-  // Reload proxy data when requested from parent
+  // Sync external selected profiles with internal state
  React.useEffect(() => {
-    if (onReloadProxyData) {
-      void loadStoredProxies();
-    }
-  }, [onReloadProxyData, loadStoredProxies]);
+    const newSet = new Set(externalSelectedProfiles);
+    setSelectedProfiles(newSet);
+    setShowCheckboxes(newSet.size > 0);
+  }, [externalSelectedProfiles]);

  // Update local sorting state when settings are loaded
  React.useEffect(() => {
@@ -203,8 +231,139 @@ export function ProfilesDataTable({
    }
  };

+  // Handle icon/checkbox click
+  const handleIconClick = React.useCallback(
+    (profileName: string) => {
+      setShowCheckboxes(true);
+      setSelectedProfiles((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(profileName)) {
+          newSet.delete(profileName);
+        } else {
+          newSet.add(profileName);
+        }
+
+        // Hide checkboxes if no profiles are selected
+        if (newSet.size === 0) {
+          setShowCheckboxes(false);
+        }
+
+        // Notify parent component
+        if (onSelectedProfilesChange) {
+          onSelectedProfilesChange(Array.from(newSet));
+        }
+
+        return newSet;
+      });
+    },
+    [onSelectedProfilesChange],
+  );
+
+  // Handle checkbox change
+  const handleCheckboxChange = React.useCallback(
+    (profileName: string, checked: boolean) => {
+      setSelectedProfiles((prev) => {
+        const newSet = new Set(prev);
+        if (checked) {
+          newSet.add(profileName);
+        } else {
+          newSet.delete(profileName);
+        }
+
+        // Hide checkboxes if no profiles are selected
+        if (newSet.size === 0) {
+          setShowCheckboxes(false);
+        }
+
+        // Notify parent component
+        if (onSelectedProfilesChange) {
+          onSelectedProfilesChange(Array.from(newSet));
+        }
+
+        return newSet;
+      });
+    },
+    [onSelectedProfilesChange],
+  );
+
+  // Handle select all checkbox
+  const handleToggleAll = React.useCallback(
+    (checked: boolean) => {
+      const newSet = checked
+        ? new Set(filteredData.map((profile) => profile.name))
+        : new Set<string>();
+
+      setSelectedProfiles(newSet);
+      setShowCheckboxes(checked);
+
+      // Notify parent component
+      if (onSelectedProfilesChange) {
+        onSelectedProfilesChange(Array.from(newSet));
+      }
+    },
+    [filteredData, onSelectedProfilesChange],
+  );
+
  const columns: ColumnDef<BrowserProfile>[] = React.useMemo(
    () => [
+      {
+        id: "select",
+        header: () => (
+          <span>
+            <Checkbox
+              checked={
+                selectedProfiles.size === filteredData.length &&
+                filteredData.length !== 0
+              }
+              onCheckedChange={(value) => handleToggleAll(!!value)}
+              aria-label="Select all"
+              className="cursor-pointer"
+            />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const profile = row.original;
+          const browser = profile.browser;
+          const IconComponent = getBrowserIcon(browser);
+          const isSelected = selectedProfiles.has(profile.name);
+
+          if (showCheckboxes || isSelected) {
+            return (
+              <span className="w-4 h-4 flex items-center justify-center">
+                <Checkbox
+                  checked={isSelected}
+                  onCheckedChange={(value) =>
+                    handleCheckboxChange(profile.name, !!value)
+                  }
+                  aria-label="Select row"
+                  className="w-4 h-4"
+                />
+              </span>
+            );
+          }
+
+          return (
+            <span className="relative flex items-center justify-center w-4 h-4">
+              <button
+                type="button"
+                className="flex items-center justify-center cursor-pointer border-none p-0"
+                onClick={() => handleIconClick(profile.name)}
+                aria-label="Select profile"
+              >
+                <span className="w-4 h-4 group">
+                  {IconComponent && (
+                    <IconComponent className="w-4 h-4 group-hover:hidden" />
+                  )}
+                  <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-200" />
+                </span>
+              </button>
+            </span>
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 40,
+      },
      {
        id: "actions",
        cell: ({ row }) => {
@@ -289,10 +448,8 @@ export function ProfilesDataTable({
        },
        cell: ({ row }) => {
          const browser: string = row.getValue("browser");
-          const IconComponent = getBrowserIcon(browser);
          return (
-            <div className="flex items-center gap-2">
-              {IconComponent && <IconComponent className="w-4 h-4" />}
+            <div className="flex items-center">
              <span>{getBrowserDisplayName(browser)}</span>
            </div>
          );
@@ -358,21 +515,21 @@ export function ProfilesDataTable({
            <div className="flex items-center gap-2">
              <Tooltip>
                <TooltipTrigger asChild>
-                  <span className="inline-flex">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => onProxySettings(profile)}
-                      disabled={
-                        !browserState.isClient ||
-                        profile.browser === "tor-browser"
-                      }
-                      className={
-                        profile.browser === "tor-browser" ? "opacity-50" : ""
-                      }
-                    >
-                      {profileHasProxy ? "Configured" : "Configure"}
-                    </Button>
+                  <span className="flex gap-2 items-center">
+                    {profileHasProxy && (
+                      <CiCircleCheck className="w-4 h-4 text-green-500" />
+                    )}
+                    {proxyDisplayName.length > 10 ? (
+                      <span className="text-sm truncate text-muted-foreground">
+                        {proxyDisplayName.slice(0, 10)}...
+                      </span>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">
+                        {profile.browser === "tor-browser"
+                          ? "Not supported"
+                          : proxyDisplayName}
+                      </span>
+                    )}
                  </span>
                </TooltipTrigger>
                <TooltipContent>{tooltipText}</TooltipContent>
@@ -414,6 +571,16 @@ export function ProfilesDataTable({
                  >
                    Configure Proxy
                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      if (onAssignProfilesToGroup) {
+                        onAssignProfilesToGroup([profile.name]);
+                      }
+                    }}
+                    disabled={!browserState.isClient || isBrowserUpdating}
+                  >
+                    Assign to Group
+                  </DropdownMenuItem>
                  {profile.browser === "camoufox" && onConfigureCamoufox && (
                    <DropdownMenuItem
                      onClick={() => {
@@ -470,6 +637,11 @@ export function ProfilesDataTable({
      },
    ],
    [
+      showCheckboxes,
+      selectedProfiles,
+      handleToggleAll,
+      handleCheckboxChange,
+      handleIconClick,
      runningProfiles,
      browserState,
      hasProxy,
@@ -480,12 +652,14 @@ export function ProfilesDataTable({
      onKillProfile,
      onConfigureCamoufox,
      onChangeVersion,
+      onAssignProfilesToGroup,
      isUpdating,
+      filteredData.length,
    ],
  );

  const table = useReactTable({
-    data,
+    data: filteredData,
    columns,
    state: {
      sorting,
@@ -502,7 +676,7 @@ export function ProfilesDataTable({
      <ScrollArea
        className={cn(
          "rounded-md border",
-          platform === "macos" ? "h-[380px]" : "h-[320px]",
+          platform === "macos" ? "h-[340px]" : "h-[280px]",
        )}
      >
        <Table>
@@ -530,6 +704,7 @@ export function ProfilesDataTable({
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
+                  className="hover:bg-accent/50"
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
@@ -0,0 +1,44 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { LuCircle } from "react-icons/lu";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <LuCircle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
    <th
      data-slot="table-head"
      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
        className,
      )}
      {...props}
@@ -82,10 +82,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-      )}
+      className={cn("p-2 align-middle whitespace-nowrap", className)}
      {...props}
    />
  );