src: first layout, many dependencies

- setup query templates and potential auth flow/state
- basic server & channel lists
- guessed types for db and apis
- user panel / settings templates
- many steps left

concord-client/src/hooks/useChannel.ts

@@ -0,0 +1,72 @@
+// src/hooks/useChannels.ts
+import { useQuery } from "@tanstack/react-query";
+import { CategoryWithChannels } from "@/types/api";
+
+// Placeholder hook for channels by instance
+export const useChannels = (instanceId?: string) => {
+  return useQuery({
+    queryKey: ["channels", instanceId],
+    queryFn: async (): Promise<CategoryWithChannels[]> => {
+      if (!instanceId || instanceId === "@me") return [];
+
+      // TODO: Replace with actual API call
+      return [
+        {
+          id: "1",
+          name: "Text Channels",
+          instanceId: instanceId,
+          position: 0,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          channels: [
+            {
+              id: "1",
+              name: "general",
+              type: "text",
+              categoryId: "1",
+              instanceId: instanceId,
+              position: 0,
+              topic: "General discussion",
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+            {
+              id: "2",
+              name: "random",
+              type: "text",
+              categoryId: "1",
+              instanceId: instanceId,
+              position: 1,
+              topic: "Random chat",
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+          ],
+        },
+        {
+          id: "2",
+          name: "Voice Channels",
+          instanceId: instanceId,
+          position: 1,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          channels: [
+            {
+              id: "3",
+              name: "General",
+              type: "voice",
+              categoryId: "2",
+              instanceId: instanceId,
+              position: 0,
+              topic: "",
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+          ],
+        },
+      ];
+    },
+    enabled: !!instanceId && instanceId !== "@me",
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+};

concord-client/src/hooks/useResponsive.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useUiStore } from "@/stores/uiStore";
+
+export const useResponsive = () => {
+  const { screenWidth, isMobile, setScreenWidth, updateIsMobile } =
+    useUiStore();
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setScreenWidth(width);
+      updateIsMobile();
+    };
+
+    // Set initial values
+    handleResize();
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, [setScreenWidth, updateIsMobile]);
+
+  return {
+    screenWidth,
+    isMobile,
+    isTablet: screenWidth >= 768 && screenWidth < 1024,
+    isDesktop: screenWidth >= 1024,
+    isLargeDesktop: screenWidth >= 1280,
+  };
+};

concord-client/src/hooks/useServers.ts

@@ -0,0 +1,78 @@
+import { useQuery } from "@tanstack/react-query";
+import { Instance, InstanceWithDetails, UserWithRoles } from "@/types/api";
+
+// Placeholder hook for servers/instances
+export const useServers = () => {
+  return useQuery({
+    queryKey: ["servers"],
+    queryFn: async (): Promise<Instance[]> => {
+      // TODO: Replace with actual API call
+      return [
+        {
+          id: "1",
+          name: "My Server",
+          icon: null,
+          description: "A cool server",
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      ];
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+};
+
+// Placeholder hook for instance details
+export const useInstanceDetails = (instanceId?: string) => {
+  return useQuery({
+    queryKey: ["instance", instanceId],
+    queryFn: async (): Promise<InstanceWithDetails | null> => {
+      if (!instanceId || instanceId === "@me") return null;
+
+      // TODO: Replace with actual API call
+      return {
+        id: instanceId,
+        name: "My Server",
+        icon: null,
+        description: "A cool server",
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        categories: [],
+        memberCount: 1,
+        roles: [],
+      };
+    },
+    enabled: !!instanceId && instanceId !== "@me",
+    staleTime: 1000 * 60 * 5,
+  });
+};
+
+// Placeholder hook for instance members
+export const useInstanceMembers = (instanceId?: string) => {
+  return useQuery({
+    queryKey: ["instance", instanceId, "members"],
+    queryFn: async (): Promise<UserWithRoles[]> => {
+      if (!instanceId || instanceId === "@me") return [];
+
+      // TODO: Replace with actual API call
+      return [
+        {
+          id: "1",
+          username: "testuser",
+          nickname: "Test User",
+          bio: "Just testing",
+          picture: null,
+          banner: null,
+          hashPassword: "",
+          algorithms: "{}",
+          status: "online",
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          roles: [],
+        },
+      ];
+    },
+    enabled: !!instanceId && instanceId !== "@me",
+    staleTime: 1000 * 60 * 2, // 2 minutes (members change more frequently)
+  });
+};