feat: org settings page (#1683)

* feat: org settings page

* Discard changes to fake-snippets-api/routes/api/orgs/list_members.ts

* feat(OrganizationHeader): add showActions prop to control action button visibility

Author: ArnavK-09

fake-snippets-api/lib/db/seed.ts

@@ -1733,4 +1733,9 @@ export const SquareWaveModule = () => (
     started_at: null,
     completed_at: null,
   })
+
+  db.addOrganization({
+    name: "test-organization",
+    owner_account_id: account_id,
+  })
 }

fake-snippets-api/routes/api/orgs/add_member.ts

@@ -5,12 +5,13 @@ export default withRouteSpec({
   methods: ["GET", "POST"],
   commonParams: z.object({
     org_id: z.string(),
-    account_id: z.string(),
+    account_id: z.string().optional(),
+    github_username: z.string().optional(),
   }),
   auth: "session",
   jsonResponse: z.object({}),
 })(async (req, ctx) => {
-  const { org_id, account_id } = req.commonParams
+  const { org_id, account_id, github_username } = req.commonParams
 
   const org = ctx.db.getOrg({ org_id }, ctx.auth)
 
@@ -28,7 +29,12 @@ export default withRouteSpec({
     })
   }
 
-  const account = ctx.db.accounts.find((acc) => acc.account_id === account_id)
+  let account = ctx.db.accounts.find((acc) => acc.account_id === account_id)
+  if (!account) {
+    account = ctx.db.accounts.find(
+      (acc) => acc.github_username === github_username,
+    )
+  }
 
   if (!account) {
     return ctx.error(404, {
@@ -39,7 +45,7 @@ export default withRouteSpec({
 
   ctx.db.addOrganizationAccount({
     org_id,
-    account_id,
+    account_id: account.account_id,
   })
 
   return ctx.json({})

src/App.tsx

@@ -85,6 +85,9 @@ const ReleasesPage = lazyImport(() => import("@/pages/releases"))
 const ReleaseDetailPage = lazyImport(() => import("@/pages/release-detail"))
 const ReleaseBuildsPage = lazyImport(() => import("@/pages/release-builds"))
 const ReleasePreviewPage = lazyImport(() => import("@/pages/preview-release"))
+const OrganizationSettingsPage = lazyImport(
+  () => import("@/pages/organization-settings"),
+)
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -265,6 +268,12 @@ function App() {
             {/* Organization creation route */}
             <Route path="/orgs/new" component={CreateOrganizationPage} />
 
+            {/* Organization settings route */}
+            <Route
+              path="/:orgname/settings"
+              component={OrganizationSettingsPage}
+            />
+
             {/* Profile fallback route - handles both organizations and users */}
             <Route path="/:username" component={ProfileRouter} />
 

src/components/organization/OrganizationCard.tsx

@@ -69,8 +69,7 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
   const handleSettingsClick = (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    // TODO: Navigate to organization settings
-    console.log("Navigate to organization settings:", organization.name)
+    window.location.href = `/${organization.name}/settings`
   }
 
   const cardContent = (

src/components/organization/OrganizationHeader.tsx

@@ -1,22 +1,33 @@
-import React from "react"
+import React, { useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
 
 interface OrganizationHeaderProps {
   organization: PublicOrgSchema
   isCurrentUserOrganization?: boolean
   className?: string
+  showActions?: boolean
 }
 
 export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
   organization,
   className,
+  showActions = true,
 }) => {
   const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const canManageOrg =
+    organization.user_permissions?.can_manage_org ||
+    organization.owner_account_id === session?.account_id
+
+  const handleSettingsClick = () => {
+    navigate(`/${organization.name}/settings`)
+  }
   return (
     <div className={cn("bg-white border-b border-gray-200", className)}>
       <div className="container mx-auto px-6 py-6">
@@ -40,17 +51,21 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
             </Avatar>
 
             <div>
-              {organization.owner_account_id === session?.account_id && (
-                <div className="flex flex-col items-center gap-3 mb-3">
-                  <h1 className="font-bold text-gray-900 text-xl">
-                    {organization.name}
-                  </h1>
-                  <Button variant="outline" size="sm">
+              <div className="flex flex-col items-center gap-3 mb-3">
+                <h1 className="font-bold text-gray-900 text-xl">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSettingsClick}
+                  >
                     <Settings className="mr-2 h-4 w-4" />
                     Settings
                   </Button>
-                </div>
-              )}
+                )}
+              </div>
 
               <div className="grid grid-cols-2 md:flex flex-wrap justify-center gap-4 text-sm">
                 <div className="flex items-center gap-1.5 text-gray-600">
@@ -63,20 +78,6 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
                   <span className="font-medium">2</span>
                   <span>packages</span>
                 </div>
-                <div className="flex items-center gap-1.5 text-gray-600">
-                  <Building2 className="h-3.5 w-3.5" />
-                  <span>Organization</span>
-                </div>
-                <div className="flex items-center gap-1.5 text-gray-600">
-                  {organization.is_personal_org ? (
-                    <Lock className="h-3.5 w-3.5" />
-                  ) : (
-                    <Globe2 className="h-3.5 w-3.5" />
-                  )}
-                  <span>
-                    {organization.is_personal_org ? "Personal" : "Public"}
-                  </span>
-                </div>
               </div>
             </div>
           </div>
@@ -106,8 +107,8 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
                 <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
                   {organization.name}
                 </h1>
-                {organization.owner_account_id === session?.account_id && (
-                  <Button variant="outline">
+                {canManageOrg && showActions && (
+                  <Button variant="outline" onClick={handleSettingsClick}>
                     <Settings className="mr-2 h-4 w-4" />
                     Settings
                   </Button>
@@ -129,16 +130,6 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
                   <Building2 className="h-4 w-4" />
                   <span>Organization</span>
                 </div>
-                <div className="flex items-center gap-2">
-                  {organization.is_personal_org ? (
-                    <Lock className="h-4 w-4" />
-                  ) : (
-                    <Globe2 className="h-4 w-4" />
-                  )}
-                  <span>
-                    {organization.is_personal_org ? "Personal" : "Public"}
-                  </span>
-                </div>
               </div>
             </div>
           </div>

src/components/organization/OrganizationMembers.tsx

@@ -3,7 +3,7 @@ import { Link } from "wouter"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Users, Crown, Shield, User } from "lucide-react"
+import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { cn } from "@/lib/utils"
 import { Account } from "fake-snippets-api/lib/db/schema"
@@ -56,34 +56,36 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
       >
         <div className="mb-4">
           <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-            <Users className="h-5 w-5" />
             Members
           </h2>
         </div>
-        <div className="text-center py-6 sm:py-8 text-gray-500">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
-          <p className="mt-2 text-sm">Loading members...</p>
+        <div className="text-center py-20 text-gray-500 grid place-items-center">
+          <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
+          <p className="mt-2 text-sm select-none">Loading members...</p>
         </div>
       </div>
     )
   }
   return (
     <div
       className={cn(
-        "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
+        "bg-white rounded-lg border border-gray-200 p-4 py-20 sm:p-6",
         className,
       )}
     >
       <div className="mb-4">
         <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-          <Users className="h-5 w-5" />
           Members ({members.length})
         </h2>
       </div>
 
       <div className="space-y-2 sm:space-y-3">
-        {members.map((member, i) => (
-          <Link key={i} href={`/${member.github_username}`} className="block">
+        {members.map((member) => (
+          <Link
+            key={member.account_id || member.github_username}
+            href={`/${member.github_username}`}
+            className="block"
+          >
             <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">

src/hooks/use-add-org-member-mutation.ts

@@ -4,20 +4,38 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 
 export const useAddOrgMemberMutation = ({
   onSuccess,
-}: { onSuccess?: () => void } = {}) => {
+  onError,
+}: { onSuccess?: () => void; onError?: (error: any) => void } = {}) => {
   const axios = useAxios()
   const session = useGlobalStore((s) => s.session)
   const queryClient = useQueryClient()
 
   return useMutation(
     ["addOrgMember"],
-    async ({ orgId, accountId }: { orgId: string; accountId: string }) => {
+    async ({
+      orgId,
+      accountId,
+      githubUsername,
+    }: {
+      orgId: string
+      accountId?: string
+      githubUsername?: string
+    }) => {
       if (!session) throw new Error("No session")
 
-      await axios.post("/orgs/add_member", {
+      const payload: any = {
         org_id: orgId,
-        account_id: accountId,
-      })
+      }
+
+      if (accountId) {
+        payload.account_id = accountId
+      }
+
+      if (githubUsername) {
+        payload.github_username = githubUsername
+      }
+
+      await axios.post("/orgs/add_member", payload)
     },
     {
       onSuccess: () => {
@@ -26,6 +44,7 @@ export const useAddOrgMemberMutation = ({
       },
       onError: (error: any) => {
         console.error("Error adding organization member:", error)
+        onError?.(error)
       },
     },
   )

src/hooks/use-list-org-members.ts

@@ -21,6 +21,7 @@ export const useListOrgMembers = ({
       enabled: Boolean(orgId || orgName),
       retry: false,
       refetchOnWindowFocus: false,
+      keepPreviousData: true,
     },
   )
 }