feat: add design to chrome extension

apps/chrome-extension/package.json

@@ -11,9 +11,11 @@
   },
   "prettier": "@repo/prettier-config/tailwindcss.js",
   "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.29.2",
     "@tanstack/react-router": "^1.29.2",
+    "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.22.4"

apps/chrome-extension/src/components/organization-switcher.tsx

@@ -0,0 +1,135 @@
+import { Button } from '@ui/primitives/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@ui/primitives/popover';
+import { useState } from 'react';
+import { ChevronDown, Check, ExternalLink } from 'lucide-react';
+import { Avatar, AvatarFallback } from '@ui/primitives/avatar';
+import { Organization } from '@/types';
+import {
+  Command,
+  CommandList,
+  CommandItem,
+  CommandGroup,
+  CommandSeparator,
+} from '@ui/primitives/command';
+import { Route } from '@/routes/_auth';
+
+export function OrganizationSwitcher({
+  organizations,
+  current,
+}: {
+  organizations: Organization[];
+  current: Organization;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<Organization | undefined>(
+    organizations.find(org => org.id === current.id)
+  );
+
+  const user = Route.useRouteContext().auth.user;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          aria-label="Select organization"
+          className="flex h-full w-full items-center rounded-sm"
+        >
+          {selected ? (
+            <OrganizationDetails org={selected} />
+          ) : (
+            <div className="h-4 w-24 animate-pulse rounded bg-gray-100" />
+          )}
+          {selected && <ChevronDown className="ml-2 h-5 w-5" />}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-0">
+        <Command>
+          <CommandList>
+            {user && (
+              <CommandItem disabled className="py-2 text-xs opacity-50">
+                <span className="w-56 overflow-hidden text-ellipsis whitespace-nowrap">
+                  Logged in as {user.email}
+                </span>
+              </CommandItem>
+            )}
+
+            <CommandGroup heading="Organizations">
+              {organizations.map(org => (
+                <CommandItem
+                  key={org.id}
+                  onSelect={() => {
+                    setSelected(org);
+                    setOpen(false);
+                  }}
+                >
+                  <OrganizationDetails
+                    org={org}
+                    selected={org.id === selected?.id}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
+                className="text-xs"
+                onSelect={() => {
+                  chrome.tabs.create({
+                    url: `${import.meta.env.VITE_KEEEP_HOST}/dashboard`,
+                  });
+                }}
+              >
+                <ExternalLink className="mr-2 h-3 w-3" />
+                Open keeep
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function OrganizationDetails({
+  org,
+  selected,
+}: {
+  org: Organization;
+  selected?: boolean;
+}) {
+  // const { supabase } = useSupabase();
+  // const publicLogoPathData = org.logo
+  //   ? supabase?.storage.from('org-avatars').getPublicUrl(org.logo)
+  //   : null;
+
+  return (
+    <>
+      <Avatar className="mr-3 h-7 w-7">
+        {/* <AvatarImage
+            src={
+              publicLogoPathData?.data.publicUrl ||
+              `https://avatar.vercel.sh/${org.slug}.svg`
+            }
+            alt={org.name}
+          /> */}
+        <AvatarFallback>
+          {org.name.substring(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <span className="mr-2 inline-flex w-full items-center justify-between text-sm">
+        <span className="max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">
+          {org.name}
+        </span>
+        {selected && <Check className="h-4 w-4" />}
+      </span>
+    </>
+  );
+}

apps/chrome-extension/src/provider/organization.tsx

@@ -0,0 +1,33 @@
+import { Organization } from '@/types';
+import { FC, ReactNode, createContext, useContext, useMemo } from 'react';
+
+type OrganizationContextType = {
+  organization: Organization | null;
+};
+
+const OrganizationContext = createContext<OrganizationContextType>({
+  organization: null,
+});
+
+export const useOrganization = () => {
+  const context = useContext(OrganizationContext);
+  if (!context) {
+    throw new Error(
+      `useOrganization must be used within a OrganizationProvider`
+    );
+  }
+  return context;
+};
+
+export const OrganizationProvider: FC<{
+  children: ReactNode;
+  organization: Organization | null;
+}> = ({ children, organization }) => {
+  const value = useMemo(() => ({ organization }), [organization]);
+
+  return (
+    <OrganizationContext.Provider value={value}>
+      {children}
+    </OrganizationContext.Provider>
+  );
+};

apps/chrome-extension/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as LoginImport } from './routes/login'
 import { Route as AuthImport } from './routes/_auth'
 import { Route as AuthIndexImport } from './routes/_auth.index'
+import { Route as AuthContactImport } from './routes/_auth.contact'
 
 // Create/Update Routes
 
@@ -32,6 +33,11 @@ const AuthIndexRoute = AuthIndexImport.update({
   getParentRoute: () => AuthRoute,
 } as any)
 
+const AuthContactRoute = AuthContactImport.update({
+  path: '/contact',
+  getParentRoute: () => AuthRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -44,6 +50,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
     }
+    '/_auth/contact': {
+      preLoaderRoute: typeof AuthContactImport
+      parentRoute: typeof AuthImport
+    }
     '/_auth/': {
       preLoaderRoute: typeof AuthIndexImport
       parentRoute: typeof AuthImport
@@ -54,7 +64,7 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren([
-  AuthRoute.addChildren([AuthIndexRoute]),
+  AuthRoute.addChildren([AuthContactRoute, AuthIndexRoute]),
   LoginRoute,
 ])
 

apps/chrome-extension/src/routes/_auth.contact.tsx

@@ -0,0 +1,136 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Avatar, AvatarFallback, AvatarImage } from '@ui/primitives/avatar';
+import { Button } from '@ui/primitives/button';
+import { Card, CardContent, CardHeader } from '@ui/primitives/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@ui/primitives/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useForm } from '@ui/lib/form';
+import { List } from '@/types';
+import { useEffect, useState } from 'react';
+import { useOrganization } from '@/provider/organization';
+
+const attributeSchema = z.object({
+  name: z.string(),
+  position: z.string(),
+  jobTitle: z.string(),
+  description: z.string(),
+});
+
+type AttributeValues = z.infer<typeof attributeSchema>;
+
+const attributes: {
+  label: string;
+  key: keyof AttributeValues;
+  default: string;
+}[] = [
+  { label: 'Job Title', key: 'jobTitle', default: 'Product & Development' },
+  {
+    label: 'Description',
+    key: 'description',
+    default:
+      'Freelance Product Engineer 🧑‍💻💬 ~ product manager who codes. Helping SaaS startups turn product pains into production-ready features.',
+  },
+];
+
+export const Route = createFileRoute('/_auth/contact')({
+  component: ContactRoute,
+});
+
+function ContactRoute() {
+  const [selectedList, setSelectedList] = useState<List | null>(null);
+
+  const form = useForm<AttributeValues>({
+    resolver: zodResolver(attributeSchema),
+  });
+
+  const { organization } = useOrganization();
+
+  useEffect(() => {
+    if (!selectedList && organization?.lists.length) {
+      setSelectedList(organization.lists[0]);
+    }
+  }, [organization]);
+
+  return (
+    <section className="p-2 pt-4">
+      <h1 className="mb-4 text-xs font-medium text-zinc-500">Create Contact</h1>
+      <Card>
+        <CardHeader className="flex flex-row gap-4 space-y-0 p-4">
+          <Avatar className="h-11 w-11 rounded-full">
+            <AvatarImage src="https://media.licdn.com/dms/image/D4E03AQHysVHLu2upIg/profile-displayphoto-shrink_400_400/0/1692787685921?e=1719446400&v=beta&t=Xdyz8l0EYPszRlOwTisEku9ckuINSsogtlc9IzPpNLY" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <input
+              className="border-b border-transparent text-base font-medium focus:outline-none"
+              {...form.register('name', { value: 'Rahul Vohra' })}
+            />
+            <input
+              className="text-sm text-zinc-500 focus:outline-none"
+              {...form.register('position', { value: 'Founder & CEO' })}
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="p-4 pt-0">
+          <table>
+            <tbody>
+              {attributes.map((attr, i) => (
+                <tr key={i} className="flex gap-4">
+                  <td className="min-w-[100px] max-w-fit p-2">
+                    <span className="text-sm font-medium text-zinc-500">
+                      {attr.label}
+                    </span>
+                  </td>
+                  <td className="p-2">
+                    <textarea
+                      // @ts-expect-error - fieldSizing is a new prop
+                      style={{ fieldSizing: 'content' }}
+                      className="resize-none text-sm text-zinc-800 focus:outline-none"
+                      {...form.register(attr.key, { value: attr.default })}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+      <div className="mt-4 flex items-center justify-between">
+        <Select
+          value={selectedList?.name}
+          disabled={!organization?.lists.length}
+          onValueChange={value => {
+            setSelectedList(
+              organization?.lists.find(l => l.id.toString() === value) || null
+            );
+          }}
+        >
+          <SelectTrigger className="h-10 w-36">
+            <SelectValue aria-label={selectedList?.id.toString()}>
+              {selectedList?.icon} {selectedList?.name}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent side="top" className="max-w-fit">
+            {organization?.lists.map(list => (
+              <SelectItem
+                key={list.id}
+                value={list.id.toString()}
+                className="pl-2"
+              >
+                {list.icon} {list.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button>Save Contact</Button>
+      </div>
+    </section>
+  );
+}

apps/chrome-extension/src/routes/_auth.index.tsx

@@ -1,17 +1,13 @@
-import { createFileRoute } from '@tanstack/react-router';
-import { Button } from '@ui/primitives/button';
+import { Link, createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_auth/')({
   component: Index,
 });
 
 function Index() {
-  const { user } = Route.useRouteContext().auth;
-  console.log(user);
   return (
-    <div className="p-2">
-      <h3>Welcome Home!</h3>
-      <Button variant="default">Hello</Button>
-    </div>
+    <section>
+      <Link to="/contact">Contact</Link>
+    </section>
   );
 }