feat: public page sharing (#1012)

* Share - WIP

* - public attachment links
- WIP

* WIP

* WIP

* Share - WIP

* WIP

* WIP

* include userRole in space object

* WIP

* Server render shared page meta tags

* disable user select

* Close Navbar on outside click on mobile

* update shared page spaceId

* WIP

* fix

* close sidebar on click

* close sidebar

* defaults

* update copy

* Store share key in lowercase

* refactor page breadcrumbs

* Change copy

* add link ref

* open link button

* add meta og:title

* add twitter tags

* WIP

* make shares/info endpoint public

* fix

* * add /p/ segment to share urls
* minore fixes

* change mobile breadcrumb icon

apps/client/src/components/settings/settings-queries.tsx

@@ -8,7 +8,8 @@ import { getGroups } from "@/features/group/services/group-service.ts";
 import { QueryParams } from "@/lib/types.ts";
 import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service.ts";
 import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
-import { getSsoProviders } from '@/ee/security/services/security-service.ts';
+import { getSsoProviders } from "@/ee/security/services/security-service.ts";
+import { getShares } from "@/features/share/services/share-service.ts";
 
 export const prefetchWorkspaceMembers = () => {
   const params = { limit: 100, page: 1, query: "" } as QueryParams;
@@ -56,4 +57,11 @@ export const prefetchSsoProviders = () => {
     queryKey: ["sso-providers"],
     queryFn: () => getSsoProviders(),
   });
-};
+};
+
+export const prefetchShares = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["share-list", { page: 1 }],
+    queryFn: () => getShares({ page: 1, limit: 100 }),
+  });
+};

apps/client/src/components/settings/settings-sidebar.tsx

@@ -11,6 +11,7 @@ import {
   IconCoin,
   IconLock,
   IconKey,
+  IconWorld,
 } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import classes from "./settings.module.css";
@@ -23,11 +24,14 @@ import {
   prefetchBilling,
   prefetchGroups,
   prefetchLicense,
+  prefetchShares,
   prefetchSpaces,
   prefetchSsoProviders,
   prefetchWorkspaceMembers,
 } from "@/components/settings/settings-queries.tsx";
 import AppVersion from "@/components/settings/app-version.tsx";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 
 interface DataItem {
   label: string;
@@ -82,6 +86,7 @@ const groupedData: DataGroup[] = [
       },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
+      { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
     ],
   },
   {
@@ -103,6 +108,8 @@ export default function SettingsSidebar() {
   const navigate = useNavigate();
   const { isAdmin } = useUserRole();
   const [workspace] = useAtom(workspaceAtom);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
   useEffect(() => {
     setActive(location.pathname);
@@ -170,6 +177,9 @@ export default function SettingsSidebar() {
             case "Security & SSO":
               prefetchHandler = prefetchSsoProviders;
               break;
+            case "Public sharing":
+              prefetchHandler = prefetchShares;
+              break;
             default:
               break;
           }
@@ -181,6 +191,11 @@ export default function SettingsSidebar() {
               data-active={active.startsWith(item.path) || undefined}
               key={item.label}
               to={item.path}
+              onClick={() => {
+                if (mobileSidebarOpened) {
+                  toggleMobileSidebar();
+                }
+              }}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>