F/add clerk login

.env.tauri

@@ -0,0 +1,7 @@
+# THIS ARE PUBLISHABLE PROD ENV VARIABLES
+
+# CLERK PROD ENV KEY
+VITE_CLERK_PUBLISHABLE_KEY=pk_live_Y2xlcmsubGFicmljLmNvJA
+
+# BACKEND API URL
+VITE_SERVER_URL=https://platform.labric.co

package.json

@@ -10,7 +10,10 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^5.35.4",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",

src-tauri/src/upload.rs

@@ -20,15 +20,15 @@ impl Default for UploadConfig {
     fn default() -> Self {
         Self {
             enabled: true,
-            server_url: "http://localhost:8000".to_string(),
+            server_url: "https://platform.labric.co".to_string(),
             ignored_patterns: vec![
                 "*.tmp".to_string(),
                 "*.log".to_string(),
                 ".git/**".to_string(),
                 "node_modules/**".to_string(),
                 ".DS_Store".to_string(),
             ],
-            upload_delay_ms: 2000,     // 2 seconds delay
+            upload_delay_ms: 2000,     // 2 seconds delay 
             max_concurrent_uploads: 5, // Default to 5 concurrent uploads
         }
     }

src/components/Simple.tsx

@@ -160,7 +160,7 @@ export default function Simple() {
 
   return (
     <main className="container mx-auto p-6 max-w-4xl">
-      <h1 className="text-3xl font-bold mb-6">File Watcher</h1>
+      {/* <h1 className="text-3xl font-bold mb-6">File Watcher</h1> */}
 
       <div className="space-y-6">
         {/* Folder Selection */}
@@ -268,7 +268,9 @@ export default function Simple() {
         )}
 
         {/* Upload Management */}
-        <UploadManager />
+        {isWatching && (
+          <UploadManager />
+        )}
       </div>
 
       {/* VS Code Style Status Ribbon */}

src/components/organization-button.tsx

@@ -0,0 +1,44 @@
+
+import { LogOut } from "lucide-react";
+import { useClerk, useOrganization } from "@clerk/clerk-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export function OrganizationButton() {
+  const { signOut } = useClerk();
+  const { organization } = useOrganization();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="focus:outline-none">
+          <Avatar className="h-8 w-8 rounded-full">
+            <AvatarImage
+              src={organization?.imageUrl}
+              alt={organization?.name}
+            />
+            <AvatarFallback className="rounded-full">
+              {organization?.name?.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>
+          {organization?.name}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => signOut()}>
+          <LogOut className="h-4 w-4 mr-2" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }