2025/improved profiles

packages/components/BrandLogo.tsx

@@ -1,5 +1,5 @@
 import { Stack, Box, Typography, styled } from "@mui/joy";
-import { DefaultTypographySystem } from "@mui/joy/styles/types";
+import type { DefaultTypographySystem } from "@mui/joy/styles/types";
 import SvgLogo from "./svg/SvgLogo";
 import SvgUse from "./svg/SvgUse";
 

packages/components/Group.tsx

@@ -0,0 +1,8 @@
+import { Stack, styled } from "@mui/joy";
+
+const Group = styled(Stack, {
+    name: "CampgroundGroup"
+})(() => ({
+    flexDirection: "row",
+}));
+export default Group;

packages/components/index.ts

@@ -3,6 +3,7 @@ import theme from "./theme";
 import SvgDefs from "./svg/SvgDefs";
 import SvgUse from "./svg/SvgUse";
 import BrandLogo from "./BrandLogo";
+import Group from "./Group";
 import "./types";
 
-export { theme, PrimaryButton, BrandLogo, SvgDefs, SvgUse };
+export { theme, PrimaryButton, BrandLogo, SvgDefs, SvgUse, Group };

packages/components/theme/dark.ts

@@ -18,6 +18,7 @@ const shades = {
 };
 
 const darkColorScheme: ColorSystemOptions = {
+    shadowOpacity: "0.35",
     palette: {
         neutral: {
             ...shades,
@@ -27,7 +28,9 @@ const darkColorScheme: ColorSystemOptions = {
             primary: shades[50],
             secondary: shades[100],
             tertiary: shades[200],
+            quartary: shades[400],
             icon: shades[300],
+            code: "#fe603f",
             "code-keyword": "#fe603f",
             "code-string": "#ff538b",
             "code-number": "#c998f9",

packages/components/theme/index.ts

@@ -30,7 +30,35 @@ const theme = extendTheme({
                     transition: "background 0.3s",
                 }
             },
-        }
+        },
+        JoyCard: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    boxShadow: theme.vars.shadow.sm,
+                }),
+            }
+        },
+        JoyTabList: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    backgroundColor: theme.vars.palette.background.body,
+                    borderRadius: theme.vars.radius.md,
+                    borderBottom: "none",
+                })
+            }
+        },
+        JoyTab: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    borderRadius: theme.vars.radius.md,
+                    borderBottom: "none",
+                    flex: 1,
+                    "::after": {
+                        display: "none",
+                    }
+                })
+            }
+        },
     }
 });
 

packages/components/theme/light.ts

@@ -27,6 +27,7 @@ const lightColorScheme: ColorSystemOptions = {
             primary: shades[50],
             secondary: shades[100],
             tertiary: shades[200],
+            quartary: shades[400],
             icon: shades[300],
             "code-keyword": "#fe603f",
             "code-string": "#ff538b",

packages/components/types/index.ts

@@ -19,6 +19,7 @@ declare module "@mui/joy/styles/types/colorSystem" {
     }
     // Add new text colours
     interface PaletteTextOverrides {
+        quartary: true;
         code: true;
         ["code-keyword"]: true;
         ["code-string"]: true;

packages/components/types/typography.ts

@@ -10,6 +10,7 @@ declare module "@mui/joy/styles/types/typography" {
     // Add new text levels
     interface TypographySystemOverrides {
         code: true;
+        quartary: true;
         ["code-keyword"]: true;
         ["code-string"]: true;
         ["code-number"]: true;

sites/app.campground.gg/api/RESTClient.ts

@@ -1,8 +1,9 @@
 import { defaultXrpcPrefix, defaultAppApiUrl, defaultBackendDomain } from "api.config";
 import type { RestResponseError, RestResponseOkWithContent, RestResponseWithContent } from "./RESTResponse";
-import type { User } from "types/user";
+import type { User, UserPostBasic, UserPostDetailed, UserPostParented } from "types/user";
 import type { RESTRefreshLogin } from "./RESTErrorHandler";
 import type { SessionAuthRefresh } from "~/session/types";
+import type { AtprotoRecord, AtprotoValueBase, GetRecordListResponse, PutRecordResponse } from "types/record";
 
 type HTTPMethod = "GET" | "OPTION" | "PUT" | "POST" | "PATCH" | "DELETE";
 
@@ -14,6 +15,7 @@ export interface RESTClientConfig extends RequestPrefixed {
     atprotoProxy: string;
     auth: string;
     refreshAuth: string;
+    userDid: string;
 };
 
 export interface RequestConfig {
@@ -30,6 +32,7 @@ export default class RESTClient {
         routePrefix: defaultXrpcPrefix,
         auth: `...`,
         refreshAuth: `...`,
+        userDid: `...`,
         atprotoProxy: `did:web:${defaultBackendDomain.replace(":", "%3A")}#campground_appview`
     };
 
@@ -128,6 +131,18 @@ export default class RESTClient {
     get<T>(config: Omit<RequestConfig, "method" | "body">) {
         return this.fetch<T>({ method: "GET", ...config });
     }
+    getRecord<T extends AtprotoValueBase>(config: { repo: string; rkey: string; collection: string; }) {
+        return this.fetch<AtprotoRecord<T>>({ route: "com.atproto.repo.getRecord", queries: config, method: "GET", request: { headers: { "atproto-proxy": "" } }, ...config });
+    }
+    getRecordList<T extends AtprotoValueBase>(config: { repo: string; collection: string; }) {
+        return this.fetch<GetRecordListResponse<T>>({ route: "com.atproto.repo.listRecords", queries: config, method: "GET", request: { headers: { "atproto-proxy": "" } }, ...config });
+    }
+    putRecord<T>(config: { repo: string; rkey: string; collection: string; record: T; }) {
+        return this.fetch<PutRecordResponse>({ route: "com.atproto.repo.putRecord", method: "POST", request: { headers: { "atproto-proxy": "" } }, body: config, ...config });
+    }
+    deleteRecord(config: { repo: string; rkey: string; collection: string; }) {
+        return this.fetch<PutRecordResponse>({ route: "com.atproto.repo.deleteRecord", method: "POST", request: { headers: { "atproto-proxy": "" } }, body: config, ...config });
+    }
     post<T>(config: Omit<RequestConfig, "method">) {
         return this.fetch<T>({ method: "POST", ...config });
     }
@@ -152,4 +167,83 @@ export default class RESTClient {
             },
         });
     }
+
+    fetchPosts(actor: string, replies: boolean = false, offset: number = 0) {
+        return this.get<{ posts: UserPostParented[] }>({
+            route: `gg.campground.profile.getPosts`,
+            queries: {
+                actor: actor,
+                limit: "50",
+                offset: offset.toString(),
+                replies: replies.toString()
+            },
+        });
+    }
+
+    fetchPostReplies(actor: string, post_tid: string, offset: number = 0) {
+        return this.get<{ posts: UserPostBasic[] }>({
+            route: `gg.campground.profile.getReplies`,
+            queries: {
+                uri: `at://${actor}/gg.campground.profile.post/${post_tid}`,
+                limit: "50",
+                offset: offset.toString(),
+            },
+        });
+    }
+
+    fetchPost(actor: string, post_tid: string) {
+        return this.get<UserPostDetailed>({
+            route: `gg.campground.profile.getPost`,
+            queries: {
+                uri: `at://${actor}/gg.campground.profile.post/${post_tid}`,
+            },
+        });
+    }
+
+    unindexPost(uri: string) {
+        return this.post<UserPostDetailed>({
+            route: `gg.campground.profile.unindexPost`,
+            queries: {
+                uri,
+            },
+        });
+    }
+
+    createPost(record: { parentUri?: string | undefined; content: string; tags: string[]; createdAt: string; updatedAt: string; }) {
+        return this.putRecord({
+            repo: this._config.userDid,
+            collection: "gg.campground.profile.post",
+            rkey: "",
+            record: {
+                ...record,
+                "$type": "gg.campground.profile.post",
+            },
+        });
+    }
+
+    updatePost(uri: string, record: { content?: string; tags?: string[]; }) {
+        return this.putRecord({
+            repo: this._config.userDid,
+            collection: "gg.campground.profile.post",
+            rkey: uri.split("/")[4],
+            record: {
+                ...record,
+                "updatedAt": new Date().toISOString(),
+                "$type": "gg.campground.profile.post",
+            },
+        });
+    }
+
+    deletePost(uri: string) {
+        return this.deleteRecord({
+            repo: this._config.userDid,
+            collection: "gg.campground.profile.post",
+            // at://did:.../gg.campground.profile.post/...
+            rkey: uri.split("/")[4],
+        })
+            .then((a) =>
+                this.unindexPost(uri)
+                    .then(() => a)
+            );
+    }
 }