fuck

frontend/src/sidebar/Sidebar.tsx

@@ -31,6 +31,34 @@ import { useSidebarContext } from './SidebarContext';
 import { usePanelManager, usePanelResizeBindings } from '../app/PanelManagerContext';
 import type { StatusMessage } from '../hooks/documents/store/useDocumentsStore';
 
+interface CommunityLink {
+  label: string;
+  href: string;
+  title: string;
+  Icon: typeof GithubIcon;
+}
+
+const COMMUNITY_LINKS: CommunityLink[] = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/papercrate-dms/papercrate',
+    title: 'Open Papercrate on GitHub',
+    Icon: GithubIcon,
+  },
+  {
+    label: 'Matrix',
+    href: 'https://matrix.to/#/#papercrate:matrix.org',
+    title: 'Join the Papercrate Matrix room',
+    Icon: MatrixIcon,
+  },
+  {
+    label: 'Website',
+    href: 'https://papercrate.org',
+    title: 'Visit papercrate.org',
+    Icon: WorldIcon,
+  },
+];
+
 type Identifier = string | number;
 type FolderIdentifier = Identifier | 'root';
 
@@ -98,11 +126,11 @@ interface SidebarProps {
   creatingFolder?: boolean;
   tags?: TagEntry[];
   untaggedFilterId?: Identifier | null;
-  activeTagIds?: Array<Identifier | null | undefined>;
-  onToggleTagFilter?: (tagId: Identifier | null | undefined) => void;
+  activeTagIds?: Array<Identifier | null>;
+  onToggleTagFilter?: (tagId: Identifier | null) => void;
   correspondents?: CorrespondentEntry[];
-  activeCorrespondentIds?: Array<Identifier | null | undefined>;
-  onToggleCorrespondentFilter?: (correspondentId: Identifier | null | undefined) => void;
+  activeCorrespondentIds?: Array<Identifier | null>;
+  onToggleCorrespondentFilter?: (correspondentId: Identifier | null) => void;
   onManageTags?: () => void;
   onManageCorrespondents?: () => void;
   onCreateTag?: (label: string) => Promise<void> | void;
@@ -338,17 +366,17 @@ const Sidebar: React.FC<SidebarProps> = ({
       .sort((a, b) => a.name!.localeCompare(b.name!, undefined, { sensitivity: 'base' }));
   }, [correspondents]);
   const activeCorrespondentSet = useMemo(
-    () => new Set<Identifier | null | undefined>(activeCorrespondentIds || []),
+    () => new Set<Identifier>(activeCorrespondentIds || []),
     [activeCorrespondentIds],
   );
   const handleToggleTag = useCallback(
-    (tagId: Identifier | null | undefined) => {
+    (tagId: Identifier | null) => {
       onToggleTagFilter?.(tagId);
     },
     [onToggleTagFilter],
   );
   const activeTagSet = useMemo(
-    () => new Set<Identifier | null | undefined>(activeTagIds || []),
+    () => new Set<Identifier | null>(activeTagIds || []),
     [activeTagIds],
   );
   const untaggedActive = untaggedFilterId ? activeTagSet.has(untaggedFilterId) : false;
@@ -566,6 +594,26 @@ const Sidebar: React.FC<SidebarProps> = ({
         )
       : null;
 
+  const communityMenuFooter = COMMUNITY_LINKS.length
+    ? (
+        <div className="menu__footer">
+          {COMMUNITY_LINKS.map(({ href, label, title, Icon }) => (
+            <a
+              key={href}
+              href={href}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="menu__footer-link"
+              title={title}
+            >
+              <Icon size={16} stroke={1.5} />
+              <span>{label}</span>
+            </a>
+          ))}
+        </div>
+      )
+    : null;
+
   const handleSearchInputChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       onSearchChange?.(event.target.value);
@@ -596,7 +644,7 @@ const Sidebar: React.FC<SidebarProps> = ({
     offset: 6,
   }) as FloatingMenuControls;
   const showTenantList = tenants.length > 1;
-  const menuClassName = `menu${!showTenantList && !themeMenuSection ? ' menu--simple' : ''}`;
+  const menuClassName = `menu${!showTenantList && !themeMenuSection && !communityMenuFooter ? ' menu--simple' : ''}`;
 
   const toggleTenantMenu = useCallback(() => {
     if (!tenantMenuOpen && tenants.length === 0 && onSelectTenant) {
@@ -735,6 +783,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               </div>
             </div>
             {themeMenuSection}
+            {communityMenuFooter}
           </div>,
           document.body,
         )
@@ -981,38 +1030,6 @@ const Sidebar: React.FC<SidebarProps> = ({
           </ul>
         </div>
       </div>
-      <div className="sidebar__footer">
-        <a
-          className="sidebar__footer-link"
-          href="https://github.com/papercrate-dms/papercrate"
-          target="_blank"
-          rel="noreferrer"
-          title="Open Papercrate on GitHub"
-        >
-          <GithubIcon size={16} stroke={1.5} />
-          <span>GitHub</span>
-        </a>
-        <a
-          className="sidebar__footer-link"
-          href="https://matrix.to/#/#papercrate:matrix.org"
-          target="_blank"
-          rel="noreferrer"
-          title="Join the Papercrate Matrix room"
-        >
-          <MatrixIcon size={16} stroke={1.5} />
-          <span>Matrix</span>
-        </a>
-        <a
-          className="sidebar__footer-link"
-          href="https://papercrate.org"
-          target="_blank"
-          rel="noreferrer"
-          title="Visit papercrate.org"
-        >
-          <WorldIcon size={16} stroke={1.5} />
-          <span>Website</span>
-        </a>
-      </div>
     </aside>
   );
 };