Merge branch 'data-layer-rewrite' of https://github.com/rowyio/rowy into data-layer-rewrite

2025-12-28 16:06:41 +01:00 · 2022-05-24 20:34:33 +10:00
parent 3821b229e1 cdb47489c9
commit 110acab45b
22 changed files with 828 additions and 0 deletions
--- a/craco.config.js
+++ b/craco.config.js
@@ -69,6 +69,7 @@ module.exports = {
      resolve: {
        // Need to add polyfill for csv-parse
        fallback: {
+          path: require.resolve("path-browserify"),
          stream: require.resolve("stream-browserify"),
          buffer: require.resolve("buffer"),
        },
--- a/package.json
+++ b/package.json
@@ -33,7 +33,9 @@
    "lodash-es": "^4.17.21",
    "match-sorter": "^6.3.1",
    "mdi-material-ui": "^7.2.0",
+    "monaco-editor-auto-typings": "^0.4.0",
    "notistack": "^2.0.4",
+    "path-browserify": "^1.0.1",
    "quicktype-core": "^6.0.71",
    "react": "^18.0.0",
    "react-color-palette": "^6.2.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,6 +38,8 @@ const TablesPage = lazy(() => import("@src/pages/Tables" /* webpackChunkName: "T
 // prettier-ignore
 const TablePage = lazy(() => import("@src/pages/Table" /* webpackChunkName: "TablePage" */));

+// prettier-ignore
+const FunctionPage = lazy(() => import("@src/pages/Function" /* webpackChunkName: "FunctionPage" */));
 // prettier-ignore
 const UserSettingsPage = lazy(() => import("@src/pages/Settings/UserSettings" /* webpackChunkName: "UserSettingsPage" */));
 // prettier-ignore
@@ -104,6 +106,13 @@ export default function App() {
              <Route path=":id" element={<TableGroupRedirectPage />} />
            </Route>

+            <Route path={ROUTES.function}>
+              <Route
+                index
+                element={<Navigate to={ROUTES.functions} replace />}
+              />
+              <Route path=":id" element={<FunctionPage />} />
+            </Route>
            <Route
              path={ROUTES.settings}
              element={<Navigate to={ROUTES.userSettings} replace />}
--- a/src/atoms/globalScope/project.ts
+++ b/src/atoms/globalScope/project.ts
@@ -11,6 +11,7 @@ import {
  TableSchema,
 } from "@src/types/table";
 import { FieldType } from "@src/constants/fields";
+import { FunctionSettings } from "@src/types/function";

 export const projectIdAtom = atom<string>("");

@@ -153,3 +154,10 @@ export const allUsersAtom = atom<UserSettings[]>([]);
 export const updateUserAtom = atom<
  UpdateCollectionDocFunction<UserSettings> | undefined
 >(undefined);
+
+/** Functions home page: all functions */
+export const FunctionsIndexAtom = atom<FunctionSettings[]>([]);
+/** Stores a function that updates a user document */
+export const updateFunctionAtom = atom<
+  UpdateCollectionDocFunction<FunctionSettings> | undefined
+>(undefined);
--- a/src/components/Function/Function.tsx
+++ b/src/components/Function/Function.tsx
@@ -0,0 +1,55 @@
+import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings";
+import Editor, { OnMount } from "@monaco-editor/react";
+
+const defaultCode = `import React from "react";
+function App() {
+  return (
+    <div>
+      <h1>Hello World!</h1>
+    </div>
+  );
+}
+`;
+const handleEditorMount: OnMount = (monacoEditor, monaco) => {
+  console.log("handleEditorMount");
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2016,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: true,
+    typeRoots: ["node_modules/@types"],
+  });
+
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+  });
+
+  const autoTypings = AutoTypings.create(monacoEditor, {
+    sourceCache: new LocalStorageCache(), // Cache loaded sources in localStorage. May be omitted
+    monaco: monaco,
+    onError: (error) => {
+      console.log(error);
+    },
+    onUpdate: (update, textual) => {
+      console.log(textual);
+    },
+  });
+};
+export default function Function() {
+  const onChange = (value: string | undefined, ev: any) => {
+    //console.log(value)
+  };
+  return (
+    <Editor
+      height="100vh"
+      theme="vs-dark"
+      defaultPath="app.tsx"
+      defaultLanguage="typescript"
+      defaultValue={defaultCode}
+      onChange={onChange}
+      onMount={handleEditorMount}
+    />
+  );
+}
--- a/src/components/Function/index.ts
+++ b/src/components/Function/index.ts
@@ -0,0 +1,2 @@
+//export * from "./Function";
+export { default } from "./Function";
--- a/src/components/Functions/FunctionGrid/TableCard.tsx
+++ b/src/components/Functions/FunctionGrid/TableCard.tsx
@@ -0,0 +1,79 @@
+import { Link } from "react-router-dom";
+
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Typography,
+  CardActions,
+  Button,
+} from "@mui/material";
+import GoIcon from "@src/assets/icons/Go";
+
+import RenderedMarkdown from "@src/components/RenderedMarkdown";
+import { TableSettings } from "@src/types/table";
+
+export interface ITableCardProps extends TableSettings {
+  link: string;
+  actions?: React.ReactNode;
+}
+
+export default function TableCard({
+  section,
+  name,
+  description,
+  link,
+  actions,
+}: ITableCardProps) {
+  return (
+    <Card style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <CardActionArea component={Link} to={link}>
+        <CardContent style={{ paddingBottom: 0 }}>
+          <Typography variant="overline" component="p">
+            {section}
+          </Typography>
+          <Typography variant="h6" component="h3" gutterBottom>
+            {name}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+
+      <CardContent style={{ flexGrow: 1, paddingTop: 0 }}>
+        <Typography
+          color="textSecondary"
+          sx={{
+            minHeight: (theme) =>
+              (theme.typography.body2.lineHeight as number) * 2 + "em",
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+          }}
+          component="div"
+        >
+          {description && (
+            <RenderedMarkdown
+              children={description}
+              //restrictionPreset="singleLine"
+            />
+          )}
+        </Typography>
+      </CardContent>
+
+      <CardActions>
+        <Button
+          variant="text"
+          color="primary"
+          endIcon={<GoIcon />}
+          component={Link}
+          to={link}
+        >
+          Open
+        </Button>
+
+        <div style={{ flexGrow: 1 }} />
+
+        {actions}
+      </CardActions>
+    </Card>
+  );
+}
--- a/src/components/Functions/FunctionGrid/TableCardSkeleton.tsx
+++ b/src/components/Functions/FunctionGrid/TableCardSkeleton.tsx
@@ -0,0 +1,42 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  CardActions,
+  Skeleton,
+} from "@mui/material";
+
+export default function TableCardSkeleton() {
+  return (
+    <Card style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <CardContent style={{ flexGrow: 1 }}>
+        <Typography variant="overline">
+          <Skeleton width={80} />
+        </Typography>
+        <Typography variant="h6" gutterBottom>
+          <Skeleton width={180} />
+        </Typography>
+        <Typography
+          color="textSecondary"
+          sx={{
+            minHeight: (theme) =>
+              (theme.typography.body2.lineHeight as number) * 2 + "em",
+          }}
+        >
+          <Skeleton width={120} />
+        </Typography>
+      </CardContent>
+
+      <CardActions sx={{ mb: 1, mx: 1 }}>
+        <Skeleton
+          width={60}
+          height={20}
+          variant="rectangular"
+          sx={{ borderRadius: 1, mr: "auto" }}
+        />
+
+        <Skeleton variant="circular" width={24} height={24} />
+      </CardActions>
+    </Card>
+  );
+}
--- a/src/components/Functions/FunctionGrid/TableGrid.tsx
+++ b/src/components/Functions/FunctionGrid/TableGrid.tsx
@@ -0,0 +1,73 @@
+import { TransitionGroup } from "react-transition-group";
+
+import { Box, Grid, Collapse } from "@mui/material";
+
+import SectionHeading from "@src/components/SectionHeading";
+import TableCard from "./TableCard";
+import SlideTransition from "@src/components/Modal/SlideTransition";
+
+import { TableSettings } from "@src/types/table";
+
+export interface ITableGridProps {
+  sections: Record<string, TableSettings[]>;
+  getLink: (table: TableSettings) => string;
+  getActions?: (table: TableSettings) => React.ReactNode;
+}
+
+export default function TableGrid({
+  sections,
+  getLink,
+  getActions,
+}: ITableGridProps) {
+  return (
+    <TransitionGroup>
+      {Object.entries(sections).map(
+        ([sectionName, sectionTables], sectionIndex) => {
+          const tableItems = sectionTables
+            .map((table, tableIndex) => {
+              if (!table) return null;
+
+              return (
+                <SlideTransition
+                  key={table.id}
+                  appear
+                  timeout={(sectionIndex + 1) * 100 + tableIndex * 50}
+                >
+                  <Grid item xs={12} sm={6} md={4} lg={3}>
+                    <TableCard
+                      {...table}
+                      link={getLink(table)}
+                      actions={getActions ? getActions(table) : null}
+                    />
+                  </Grid>
+                </SlideTransition>
+              );
+            })
+            .filter((item) => item !== null);
+
+          if (tableItems.length === 0) return null;
+
+          return (
+            <Collapse key={sectionName}>
+              <Box component="section" sx={{ mt: 4 }}>
+                <SlideTransition
+                  key={"grid-section-" + sectionName}
+                  in
+                  timeout={(sectionIndex + 1) * 100}
+                >
+                  <SectionHeading sx={{ pl: 2, pr: 1.5 }}>
+                    {sectionName}
+                  </SectionHeading>
+                </SlideTransition>
+
+                <Grid component={TransitionGroup} container spacing={2}>
+                  {tableItems}
+                </Grid>
+              </Box>
+            </Collapse>
+          );
+        }
+      )}
+    </TransitionGroup>
+  );
+}
--- a/src/components/Functions/FunctionGrid/index.ts
+++ b/src/components/Functions/FunctionGrid/index.ts
@@ -0,0 +1,2 @@
+export * from "./TableGrid";
+export { default } from "./TableGrid";
--- a/src/components/Functions/FunctionList/TableList.tsx
+++ b/src/components/Functions/FunctionList/TableList.tsx
@@ -0,0 +1,71 @@
+import { TransitionGroup } from "react-transition-group";
+
+import { Box, Paper, Collapse, List } from "@mui/material";
+
+import SectionHeading from "@src/components/SectionHeading";
+import TableListItem from "./TableListItem";
+import SlideTransition from "@src/components/Modal/SlideTransition";
+
+import { TableSettings } from "@src/types/table";
+
+export interface ITableListProps {
+  sections: Record<string, TableSettings[]>;
+  getLink: (table: TableSettings) => string;
+  getActions?: (table: TableSettings) => React.ReactNode;
+}
+
+export default function TableList({
+  sections,
+  getLink,
+  getActions,
+}: ITableListProps) {
+  return (
+    <TransitionGroup>
+      {Object.entries(sections).map(
+        ([sectionName, sectionTables], sectionIndex) => {
+          const tableItems = sectionTables
+            .map((table) => {
+              if (!table) return null;
+
+              return (
+                <Collapse key={table.id}>
+                  <TableListItem
+                    {...table}
+                    link={getLink(table)}
+                    actions={getActions ? getActions(table) : null}
+                  />
+                </Collapse>
+              );
+            })
+            .filter((item) => item !== null);
+
+          if (tableItems.length === 0) return null;
+
+          return (
+            <Collapse key={sectionName}>
+              <Box component="section" sx={{ mt: 4 }}>
+                <SlideTransition
+                  key={"list-section-" + sectionName}
+                  in
+                  timeout={(sectionIndex + 1) * 100}
+                >
+                  <SectionHeading sx={{ pl: 2, pr: 1 }}>
+                    {sectionName}
+                  </SectionHeading>
+                </SlideTransition>
+
+                <SlideTransition in timeout={(sectionIndex + 1) * 100}>
+                  <Paper>
+                    <List disablePadding>
+                      <TransitionGroup>{tableItems}</TransitionGroup>
+                    </List>
+                  </Paper>
+                </SlideTransition>
+              </Box>
+            </Collapse>
+          );
+        }
+      )}
+    </TransitionGroup>
+  );
+}
--- a/src/components/Functions/FunctionList/TableListItem.tsx
+++ b/src/components/Functions/FunctionList/TableListItem.tsx
@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+
+import {
+  ListItem,
+  ListItemButton,
+  Typography,
+  IconButton,
+} from "@mui/material";
+import GoIcon from "@mui/icons-material/ArrowForward";
+
+import RenderedMarkdown from "@src/components/RenderedMarkdown";
+import { TableSettings } from "@src/types/table";
+
+export interface ITableListItemProps extends TableSettings {
+  link: string;
+  actions?: React.ReactNode;
+}
+
+export default function TableListItem({
+  // section,
+  name,
+  description,
+  link,
+  actions,
+}: ITableListItemProps) {
+  return (
+    <ListItem disableGutters disablePadding>
+      <ListItemButton
+        component={Link}
+        to={link}
+        sx={{
+          alignItems: "baseline",
+          height: 48,
+          py: 0,
+          pr: 0,
+          borderRadius: 2,
+          "& > *": { lineHeight: "48px !important" },
+          flexWrap: "nowrap",
+          overflow: "hidden",
+
+          flexBasis: 160 + 16,
+          flexGrow: 0,
+          flexShrink: 0,
+          mr: 2,
+        }}
+      >
+        <Typography component="h3" variant="button" noWrap>
+          {name}
+        </Typography>
+      </ListItemButton>
+
+      <Typography
+        color="textSecondary"
+        component="div"
+        noWrap
+        sx={{ flexGrow: 1, "& *": { display: "inline" } }}
+      >
+        {description && (
+          <RenderedMarkdown
+            children={description}
+            restrictionPreset="singleLine"
+          />
+        )}
+      </Typography>
+
+      <div style={{ flexShrink: 0 }}>
+        {actions}
+
+        <IconButton
+          size="large"
+          color="primary"
+          component={Link}
+          to={link}
+          sx={{ display: { xs: "none", sm: "inline-flex" } }}
+        >
+          <GoIcon />
+        </IconButton>
+      </div>
+    </ListItem>
+  );
+}
--- a/src/components/Functions/FunctionList/TableListItemSkeleton.tsx
+++ b/src/components/Functions/FunctionList/TableListItemSkeleton.tsx
@@ -0,0 +1,23 @@
+import { ListItem, Skeleton } from "@mui/material";
+
+export default function TableListItemSkeleton() {
+  return (
+    <ListItem disableGutters disablePadding style={{ height: 48 }}>
+      <Skeleton width={160} sx={{ mx: 2, flexShrink: 0 }} />
+      <Skeleton sx={{ mr: 2, flexBasis: 240, flexShrink: 1 }} />
+
+      <Skeleton
+        variant="circular"
+        width={24}
+        height={24}
+        sx={{ ml: "auto", mr: 3, flexShrink: 0 }}
+      />
+      <Skeleton
+        variant="circular"
+        width={24}
+        height={24}
+        sx={{ mr: 1.5, flexShrink: 0 }}
+      />
+    </ListItem>
+  );
+}
--- a/src/components/Functions/FunctionList/index.ts
+++ b/src/components/Functions/FunctionList/index.ts
@@ -0,0 +1,2 @@
+export * from "./TableList";
+export { default } from "./TableList";
--- a/src/components/Functions/HomeWelcomePrompt.tsx
+++ b/src/components/Functions/HomeWelcomePrompt.tsx
@@ -0,0 +1,33 @@
+import { Zoom, Stack, Typography } from "@mui/material";
+
+export default function HomeWelcomePrompt() {
+  return (
+    <Zoom in style={{ transformOrigin: `${320 - 52}px ${320 - 52}px` }}>
+      <Stack
+        justifyContent="center"
+        sx={{
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          boxShadow: 24,
+
+          width: 320,
+          height: 320,
+          p: 5,
+          borderRadius: "50% 50% 0 50%",
+
+          position: "fixed",
+          bottom: 0,
+          right: 0,
+        }}
+      >
+        <Typography variant="overline" component="h1" gutterBottom>
+          Get started
+        </Typography>
+
+        <Typography variant="h5" component="p">
+          Create a function
+        </Typography>
+      </Stack>
+    </Zoom>
+  );
+}
--- a/src/config/dbPaths.ts
+++ b/src/config/dbPaths.ts
@@ -8,3 +8,5 @@ export const TABLE_GROUP_SCHEMAS = `${SETTINGS}/groupSchema` as const;

 export const USER_MANAGEMENT = `${CONFIG}/userManagement` as const;
 export const USERS = `${USER_MANAGEMENT}/users` as const;
+export const FUNCTIONS_INDEX = `${CONFIG}/functions` as const;
+export const FUNCTION_SCHEMAS = `${FUNCTIONS_INDEX}/functions/schema` as const;
--- a/src/constants/routes.tsx
+++ b/src/constants/routes.tsx
@@ -17,6 +17,9 @@ export enum ROUTES {

  tables = "/tables",
  automations = "/automations",
+  functions = "/functions",
+  function = "/function",
+  functionWithId = "/function/:id",

  table = "/table",
  tableWithId = "/table/:id",
--- a/src/pages/Function.tsx
+++ b/src/pages/Function.tsx
@@ -0,0 +1,67 @@
+import { Suspense } from "react";
+import { useAtom, Provider } from "jotai";
+import { useParams } from "react-router-dom";
+import { isEmpty } from "lodash-es";
+
+import { Fade } from "@mui/material";
+
+//import TableHeaderSkeleton from "@src/components/Table/Skeleton/TableHeaderSkeleton";
+//import HeaderRowSkeleton from "@src/components/Table/Skeleton/HeaderRowSkeleton";
+//import EmptyTable from "@src/components/Table/EmptyTable";
+import Function from "@src/components/Function";
+
+import { currentUserAtom, globalScope } from "@src/atoms/globalScope";
+// import TableSourceFirestore from "@src/sources/TableSourceFirestore";
+// import {
+//   tableScope,
+//   tableIdAtom,
+//   tableSettingsAtom,
+//   tableSchemaAtom,
+// } from "@src/atoms/tableScope";
+
+export default function FunctionPage() {
+  // const [tableId] = useAtom(tableIdAtom, tableScope);
+  // const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  // const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+
+  // console.log(tableSchema);
+
+  // if (isEmpty(tableSchema.columns))
+  //   return (
+  //     <Fade style={{ transitionDelay: "500ms" }}>
+  //       <div>
+  //         <EmptyTable />
+  //       </div>
+  //     </Fade>
+  //   );
+
+  return <Function key="function" />;
+}
+
+function ProvidedFunctionPage() {
+  const { id } = useParams();
+  const [currentUser] = useAtom(currentUserAtom, globalScope);
+
+  return (
+    <Suspense
+      fallback={
+        <>
+          {/* <TableHeaderSkeleton />
+          <HeaderRowSkeleton /> */}
+        </>
+      }
+    >
+      {/* <Provider
+        key={id}
+        scope={tableScope}
+        initialValues={[
+          [tableIdAtom, id],
+          [currentUserAtom, currentUser],
+        ]}
+      > */}
+      {/* <TableSourceFirestore /> */}
+      <FunctionPage />
+      {/* </Provider> */}
+    </Suspense>
+  );
+}
--- a/src/pages/Functions.tsx
+++ b/src/pages/Functions.tsx
@@ -0,0 +1,226 @@
+import { useAtom, useSetAtom } from "jotai";
+import { find, groupBy } from "lodash-es";
+
+import {
+  Container,
+  Stack,
+  Typography,
+  ToggleButtonGroup,
+  ToggleButton,
+  Tooltip,
+  Fab,
+  Checkbox,
+  IconButton,
+  Zoom,
+} from "@mui/material";
+import ViewListIcon from "@mui/icons-material/ViewListOutlined";
+import ViewGridIcon from "@mui/icons-material/ViewModuleOutlined";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import EditIcon from "@mui/icons-material/EditOutlined";
+import AddIcon from "@mui/icons-material/Add";
+
+import FloatingSearch from "@src/components/FloatingSearch";
+import SlideTransition from "@src/components/Modal/SlideTransition";
+import FunctionGrid from "@src/components/Functions/FunctionGrid";
+import FunctionList from "@src/components/Functions/FunctionList";
+import HomeWelcomePrompt from "@src/components/Functions/HomeWelcomePrompt";
+import EmptyState from "@src/components/EmptyState";
+
+import {
+  globalScope,
+  userRolesAtom,
+  userSettingsAtom,
+  updateUserSettingsAtom,
+  tablesAtom,
+  tablesViewAtom,
+  tableSettingsDialogAtom,
+} from "@src/atoms/globalScope";
+import { TableSettings } from "@src/types/table";
+import { ROUTES } from "@src/constants/routes";
+import useBasicSearch from "@src/hooks/useBasicSearch";
+import { APP_BAR_HEIGHT } from "@src/layouts/Navigation";
+
+const SEARCH_KEYS = ["id", "name", "section", "description"];
+
+export default function HomePage() {
+  const [userRoles] = useAtom(userRolesAtom, globalScope);
+  const [userSettings] = useAtom(userSettingsAtom, globalScope);
+  const [updateUserSettings] = useAtom(updateUserSettingsAtom, globalScope);
+  const [tables] = useAtom(tablesAtom, globalScope);
+  const [view, setView] = useAtom(tablesViewAtom, globalScope);
+  const openTableSettingsDialog = useSetAtom(
+    tableSettingsDialogAtom,
+    globalScope
+  );
+
+  const [results, query, handleQuery] = useBasicSearch(
+    tables ?? [],
+    SEARCH_KEYS
+  );
+
+  const favorites = Array.isArray(userSettings.favoriteTables)
+    ? userSettings.favoriteTables
+    : [];
+  const sections: Record<string, TableSettings[]> = {
+    Favorites: favorites.map((id) => find(results, { id })) as TableSettings[],
+    ...groupBy(results, "section"),
+  };
+
+  if (!Array.isArray(tables))
+    throw new Error(
+      "Project settings are not configured correctly. `tables` is not an array."
+    );
+
+  const createFunctionFab = (
+    <Tooltip title="Create function">
+      <Zoom in>
+        <Fab
+          color="secondary"
+          aria-label="Create table"
+          onClick={() => openTableSettingsDialog({ mode: "create" })}
+          sx={{
+            zIndex: "speedDial",
+            position: "fixed",
+            bottom: (theme) => ({
+              xs: `max(${theme.spacing(2)}, env(safe-area-inset-bottom))`,
+              sm: `max(${theme.spacing(3)}, env(safe-area-inset-bottom))`,
+            }),
+            right: (theme) => ({
+              xs: `max(${theme.spacing(2)}, env(safe-area-inset-right))`,
+              sm: `max(${theme.spacing(3)}, env(safe-area-inset-right))`,
+            }),
+          }}
+        >
+          <AddIcon />
+        </Fab>
+      </Zoom>
+    </Tooltip>
+  );
+
+  if (tables.length === 0) {
+    if (userRoles.includes("ADMIN"))
+      return (
+        <>
+          <HomeWelcomePrompt />
+          {createFunctionFab}
+        </>
+      );
+
+    return (
+      <EmptyState
+        message="No tables"
+        description="There are no tables in this project. Sign in with an ADMIN account to create tables."
+        fullScreen
+        style={{ marginTop: -APP_BAR_HEIGHT }}
+      />
+    );
+  }
+
+  const getLink = (table: TableSettings) =>
+    `${ROUTES.table}/${table.id.replace(/\//g, "~2F")}`;
+
+  const handleFavorite =
+    (id: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const favoriteTables = e.target.checked
+        ? [...favorites, id]
+        : favorites.filter((f) => f !== id);
+
+      if (updateUserSettings) updateUserSettings({ favoriteTables });
+    };
+
+  const getActions = (table: TableSettings) => (
+    <>
+      {userRoles.includes("ADMIN") && (
+        <IconButton
+          aria-label="Edit table"
+          onClick={() =>
+            openTableSettingsDialog({ mode: "update", data: table })
+          }
+          size={view === "list" ? "large" : undefined}
+        >
+          <EditIcon />
+        </IconButton>
+      )}
+      <Checkbox
+        onChange={handleFavorite(table.id)}
+        checked={favorites.includes(table.id)}
+        icon={<FavoriteBorderIcon />}
+        checkedIcon={
+          <Zoom in>
+            <FavoriteIcon />
+          </Zoom>
+        }
+        name={`favorite-${table.id}`}
+        inputProps={{ "aria-label": "Favorite" }}
+        sx={view === "list" ? { p: 1.5 } : undefined}
+        color="secondary"
+      />
+    </>
+  );
+
+  return (
+    <Container component="main" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
+      <FloatingSearch
+        label="Search tables"
+        onChange={(e) => handleQuery(e.target.value)}
+        paperSx={{
+          maxWidth: (theme) => ({ md: theme.breakpoints.values.sm - 48 }),
+          mb: { xs: 2, md: -6 },
+        }}
+      />
+
+      <SlideTransition in timeout={50}>
+        <Stack
+          direction="row"
+          spacing={2}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Typography
+            variant="h6"
+            component="h1"
+            sx={{ pl: 2, cursor: "default" }}
+          >
+            {query ? `${results.length} of ${tables.length}` : tables.length}{" "}
+            tables
+          </Typography>
+
+          <ToggleButtonGroup
+            value={view}
+            size="large"
+            exclusive
+            onChange={(_, v) => {
+              if (v !== null) setView(v);
+            }}
+            aria-label="Table view"
+            sx={{ "& .MuiToggleButton-root": { borderRadius: 2 } }}
+          >
+            <ToggleButton value="list" aria-label="List view">
+              <ViewListIcon style={{ transform: "rotate(180deg)" }} />
+            </ToggleButton>
+            <ToggleButton value="grid" aria-label="Grid view">
+              <ViewGridIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
+      </SlideTransition>
+
+      {view === "list" ? (
+        <FunctionList
+          sections={sections}
+          getLink={getLink}
+          getActions={getActions}
+        />
+      ) : (
+        <FunctionGrid
+          sections={sections}
+          getLink={getLink}
+          getActions={getActions}
+        />
+      )}
+
+      {userRoles.includes("ADMIN") && createFunctionFab}
+    </Container>
+  );
+}
--- a/src/sources/FunctionsSourceFirestore.tsx
+++ b/src/sources/FunctionsSourceFirestore.tsx
@@ -0,0 +1,23 @@
+import { memo } from "react";
+
+import useFirestoreCollectionWithAtom from "@src/hooks/useFirestoreCollectionWithAtom";
+import {
+  globalScope,
+  FunctionsIndexAtom,
+  updateFunctionAtom,
+} from "@src/atoms/globalScope";
+import { FUNCTION_SCHEMAS } from "@src/config/dbPaths";
+
+const FunctionsSource = memo(function FunctionsSource() {
+  useFirestoreCollectionWithAtom(
+    FunctionsIndexAtom,
+    globalScope,
+    FUNCTION_SCHEMAS,
+    {
+      updateDocAtom: updateFunctionAtom,
+    }
+  );
+  return null;
+});
+
+export default FunctionsSource;
--- a/src/types/function.d.ts
+++ b/src/types/function.d.ts
@@ -0,0 +1,14 @@
+/** Function settings stored in project _rowy_/functions */
+export type FunctionSettings = {
+  id: string;
+  name: string;
+  editorRoles: string[];
+  executorRoles: string[];
+  functionType: "utility" | "task" | "rest" | "webhook";
+};
+
+/** Function schema document loaded when function or function settings dialog is open */
+export type FunctionSchema = {
+  code: string;
+  dependencies?: Record<string, ColumnConfig>;
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -9390,6 +9390,11 @@ mkdirp@^0.5.5, mkdirp@~0.5.1:
  dependencies:
    minimist "^1.2.5"

+monaco-editor-auto-typings@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-auto-typings/-/monaco-editor-auto-typings-0.4.0.tgz#52c0b1c74086fbf23568a0322a505808ecd95566"
+  integrity sha512-rd98fgFtHIvetD/Pr3bU5u2lZkd39d8mFJJOIOuEPcf+ZLj1YpRWM0rv/7KKBbOkR50ya6IAp/xR1gE1BEiXrw==
+
 monaco-editor@^0.33.0:
  version "0.33.0"
  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af"
@@ -9838,6 +9843,11 @@ pascal-case@^3.1.2:
    no-case "^3.0.4"
    tslib "^2.0.3"

+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-exists@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"