move navigational actions to a separate folder

web/panda.config.ts

@@ -127,7 +127,7 @@ export default defineConfig({
             disabled: { value: "{colors.gray.400}" },
           },
           border: {
-            default: { value: "{colors.gray.400}" },
+            default: { value: "{colors.blackAlpha.200}" },
             muted: { value: "{colors.gray.500}" },
             subtle: { value: "{colors.gray.300}" },
             disabled: { value: "{colors.gray.400}" },

web/src/components/site/Action/Back.tsx

@@ -0,0 +1,11 @@
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { PropsWithChildren } from "react";
+
+import { Link, LinkProps } from "src/theme/components/Link";
+
+export function BackAction({
+  children,
+  ...props
+}: PropsWithChildren<LinkProps>) {
+  return <Link {...props}>{children ?? <ArrowLeftIcon width="1.4em" />}</Link>;
+}

web/src/components/site/Navigation/Navpill/Navpill.tsx

@@ -7,15 +7,15 @@ import { Toolpill } from "src/components/site/Toolpill/Toolpill";
 import { Input } from "src/theme/components/Input";
 
 import { Close } from "../../Action/Action";
-import { AdminAction } from "../../Action/Admin";
-import { ComposeAction } from "../../Action/Compose";
-import { DashboardAction } from "../../Action/Dashboard";
-import { HomeAction } from "../../Action/Home";
-import { LinksAction } from "../../Action/Links";
-import { LoginAction } from "../../Action/Login";
-import { LogoutAction } from "../../Action/Logout";
-import { NotificationsAction } from "../../Action/Notifications";
-import { SettingsAction } from "../../Action/Settings";
+import { AdminAction } from "../Anchors/Admin";
+import { ComposeAction } from "../Anchors/Compose";
+import { DashboardAction } from "../Anchors/Dashboard";
+import { HomeAction } from "../Anchors/Home";
+import { LinksAction } from "../Anchors/Links";
+import { LoginAction } from "../Anchors/Login";
+import { LogoutAction } from "../Anchors/Logout";
+import { NotificationsAction } from "../Anchors/Notifications";
+import { SettingsAction } from "../Anchors/Settings";
 
 import { HStack, styled } from "@/styled-system/jsx";
 

web/src/components/site/Navigation/Sidebar/Sidebar.tsx

@@ -79,7 +79,7 @@ export function Sidebar() {
               borderColor="oklch(0 0 0deg / 5%)"
             />
 
-            <Link w="full" size="sm" href="/l">
+            <Link w="full" size="xs" href="/l">
               <LinkIcon />
               Link directory
             </Link>

web/src/components/site/Navigation/Sidebar/components/Authbar.tsx

@@ -1,7 +1,7 @@
 import { useSession } from "src/auth";
-import { AdminAction } from "src/components/site/Action/Admin";
-import { LogoutAction } from "src/components/site/Action/Logout";
-import { SettingsAction } from "src/components/site/Action/Settings";
+import { AdminAction } from "src/components/site/Navigation/Anchors/Admin";
+import { LogoutAction } from "src/components/site/Navigation/Anchors/Logout";
+import { SettingsAction } from "src/components/site/Navigation/Anchors/Settings";
 import { ProfilePill } from "src/components/site/ProfilePill/ProfilePill";
 
 import { HStack, VStack } from "@/styled-system/jsx";

web/src/components/site/Navigation/Sidebar/components/Toolbar.tsx

@@ -1,8 +1,8 @@
 import { useSession } from "src/auth";
-import { ComposeAction } from "src/components/site/Action/Compose";
-import { HomeAction } from "src/components/site/Action/Home";
-import { LoginAction } from "src/components/site/Action/Login";
-import { NotificationsAction } from "src/components/site/Action/Notifications";
+import { ComposeAction } from "src/components/site/Navigation/Anchors/Compose";
+import { HomeAction } from "src/components/site/Navigation/Anchors/Home";
+import { LoginAction } from "src/components/site/Navigation/Anchors/Login";
+import { NotificationsAction } from "src/components/site/Navigation/Anchors/Notifications";
 
 import { HStack } from "@/styled-system/jsx";
 

web/src/screens/compose/components/ComposeForm/ComposeForm.tsx

@@ -3,7 +3,8 @@ import { FormProvider } from "react-hook-form";
 
 import { Bold } from "src/components/content/ContentComposer/controls/Bold";
 import { Italic } from "src/components/content/ContentComposer/controls/Italic";
-import { Back, Save, Send } from "src/components/site/Action/Action";
+import { Save, Send } from "src/components/site/Action/Action";
+import { BackAction } from "src/components/site/Action/Back";
 import { Toolpill } from "src/components/site/Toolpill/Toolpill";
 import { Button } from "src/theme/components/Button";
 
@@ -76,7 +77,7 @@ export function ComposeForm(props: Props) {
                 <Italic />
               </HStack>
               <HStack>
-                <Back onClick={onBack} />
+                <BackAction href="/" onClick={onBack} />
                 <Send onClick={onPublish} />
                 <Save onClick={onSave} />
               </HStack>