Many frontend fixes & deps bumps

frontend/.eslintrc.cjs

@@ -41,6 +41,7 @@ module.exports = {
       plugins: ["jsx-a11y", "matrix-org"],
       parserOptions: {
         project: ["./tsconfig.node.json", "./tsconfig.json"],
+        warnOnUnsupportedTypeScriptVersion: false,
       },
       files: ["*.ts", "*.tsx", "*.cjs", "*.js"],
       rules: {

frontend/package.json

@@ -19,13 +19,13 @@
     "@emotion/react": "^11.11.1",
     "@urql/core": "^4.0.10",
     "@urql/devtools": "^2.0.3",
-    "@urql/exchange-graphcache": "^6.1.3",
+    "@urql/exchange-graphcache": "^6.1.4",
     "@urql/exchange-refocus": "^1.0.2",
     "@urql/exchange-request-policy": "^1.0.2",
-    "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#c3f760ae02499897b9315feee51310cb739e7257",
+    "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#48eefccb388cb643ad82815559b3a08c8cc9ce7a",
     "date-fns": "^2.30.0",
     "graphql": "^16.6.0",
-    "jotai": "^2.2.0",
+    "jotai": "^2.2.1",
     "jotai-devtools": "^0.5.3",
     "jotai-location": "^0.5.1",
     "jotai-urql": "^0.7.1",
@@ -34,28 +34,28 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^4.0.1",
-    "@graphql-codegen/client-preset": "^4.0.0",
+    "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-codegen/urql-introspection": "^2.2.1",
     "@graphql-eslint/eslint-plugin": "^3.19.1",
-    "@storybook/addon-actions": "^7.0.20",
+    "@storybook/addon-actions": "^7.0.22",
-    "@storybook/addon-backgrounds": "^7.0.20",
+    "@storybook/addon-backgrounds": "^7.0.22",
-    "@storybook/addon-controls": "^7.0.20",
+    "@storybook/addon-controls": "^7.0.22",
-    "@storybook/addon-docs": "^7.0.20",
+    "@storybook/addon-docs": "^7.0.22",
-    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-measure": "^7.0.20",
+    "@storybook/addon-measure": "^7.0.22",
-    "@storybook/addon-outline": "^7.0.20",
+    "@storybook/addon-outline": "^7.0.22",
-    "@storybook/addon-toolbars": "^7.0.20",
+    "@storybook/addon-toolbars": "^7.0.22",
-    "@storybook/addon-viewport": "^7.0.20",
+    "@storybook/addon-viewport": "^7.0.22",
-    "@storybook/react": "^7.0.20",
+    "@storybook/react": "^7.0.22",
-    "@storybook/react-vite": "^7.0.20",
+    "@storybook/react-vite": "^7.0.22",
     "@types/node": "^20.3.1",
-    "@types/react": "^18.2.12",
+    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.5",
+    "@types/react-dom": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-c8": "^0.32.0",
+    "@vitest/coverage-c8": "^0.32.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -63,15 +63,14 @@
     "eslint-plugin-matrix-org": "^1.2.0",
     "eslint-plugin-prettier": "^4.2.1",
     "postcss": "^8.4.24",
+    "postcss-prune-var": "^1.1.1",
     "prettier": "2.8.0",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.0.22",
     "tailwindcss": "^3.3.2",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
     "vite": "^4.3.9",
-    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-graphql-codegen": "^3.2.2",
-    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.32.2"
-    "vitest": "^0.32.0"
   }
 }

frontend/postcss.config.cjs

@@ -17,5 +17,9 @@
 /** @type {import('postcss-load-config').Config} */
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("postcss-prune-var"),
+  ],
 };

frontend/src/components/BrowserSession.tsx

@@ -43,12 +43,9 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
   const createdAt = data.createdAt;
 
   return (
-    <Block className="my-2">
+    <Block className="my-4 flex items-center">
-      <IconWebBrowser
+      <IconWebBrowser className="mr-4 session-icon" />
-        className="session-icon float-left mr-2"
+      <div className="flex-1">
-        width="24"
-        height="24"
-      />
         <Body size="md" weight="medium">
           {isCurrent ? (
             <>
@@ -58,14 +55,19 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
             <>Browser Session</>
           )}
         </Body>
-      <div className="flex flex-row justify-between">
+        <Body size="sm" className="text-secondary">
-        <Body size="sm" className="secondary-text">
           Signed in <DateTime datetime={createdAt} />
         </Body>
-        <Body as="a" size="sm" weight="medium" href="#" data-kind="critical">
+      </div>
+      <Body
+        as="a"
+        size="sm"
+        weight="medium"
+        href="#"
+        className="text-critical underline hover:no-underline"
+      >
         Sign out
       </Body>
-      </div>
     </Block>
   );
 };

frontend/src/components/UserGreeting.tsx

@@ -46,7 +46,7 @@ const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
 
   if (result.data?.user) {
     return (
-      <header className="oidc_Header">
+      <header className="text-center">
         <Heading size="xl" weight="semibold">
           {result.data.user.matrix.displayName || result.data.user.username}
         </Heading>

frontend/src/gql/graphql.ts

@@ -22,7 +22,7 @@ export type Incremental<T> =
     };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: { input: string | number; output: string };
+  ID: { input: string; output: string };
   String: { input: string; output: string };
   Boolean: { input: boolean; output: boolean };
   Int: { input: number; output: number };

frontend/src/index.css

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-@import "@vector-im/compound-web/dist/style.css";
+@import "@vector-im/compound-web/dist/index.css";
 
 @tailwind base;
 @tailwind components;
@@ -27,30 +27,6 @@ body {
   margin: var(--cpd-space-10x) auto var(--cpd-space-6x) auto;
 }
 
-.oidc_Header {
-  text-align: center;
-}
-
-.oidc_Header > * {
-  margin: 0;
-}
-
-.secondary-text {
-  color: var(--cpd-color-text-secondary);
-}
-
-a {
-  text-decoration: underline;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-[data-kind="critical"] {
-  color: var(--cpd-color-text-critical-primary);
-}
-
 .nav-bar a {
   color: var(--cpd-color-text-action-primary);
 }
@@ -73,6 +49,8 @@ hr {
 .session-icon {
   color: var(--cpd-color-icon-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
-  padding: var(--cpd-space-1x);
+  height: var(--cpd-space-10x);
-  border-radius: 4px;
+  width: var(--cpd-space-10x);
+  padding: var(--cpd-space-2x);
+  border-radius: var(--cpd-space-1x);
 }

frontend/src/pages/Home.tsx

@@ -28,7 +28,7 @@ const Home: React.FC = () => {
     return (
       <>
         <UserGreeting userId={currentUserId} />
-        <div className="mt-4 grid lg:grid-cols-3 gap-1">
+        <div className="mt-4 grid gap-1">
           <OAuth2SessionList userId={currentUserId} />
           <CompatSsoLoginList userId={currentUserId} />
           <BrowserSessionList userId={currentUserId} />

frontend/tailwind.config.cjs

@@ -23,6 +23,8 @@ module.exports = {
   theme: {
     colors: {
       white: "#FFFFFF",
+      secondary: "var(--cpd-color-text-secondary)",
+      critical: "var(--cpd-color-text-critical-primary)",
       accent: "#0DBD8B",
       alert: "#FF5B55",
       links: "#0086E6",

frontend/vite.config.ts

@@ -15,9 +15,7 @@
 /// <reference types="vitest" />
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import eslint from "vite-plugin-eslint";
 import codegen from "vite-plugin-graphql-codegen";
-import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
   base: "/app/",
@@ -36,22 +34,6 @@ export default defineConfig({
         ],
       },
     }),
-    eslint({
-      // Explicitly set the config file, else storybook gets confused
-      overrideConfigFile: "./.eslintrc.cjs",
-    }),
-    svgr({
-      exportAsDefault: true,
-      svgrOptions: {
-        // Using 1em in order to make SVG size inherits from text size.
-        icon: "1em",
-        svgProps: {
-          // Adding a class in case we want to add global overrides, but one
-          // should probably stick to using CSS modules most of the time
-          class: "cpd-icon",
-        },
-      },
-    }),
   ],
   server: {
     proxy: {