squash and nuke dev

src/components/navigation/sidebars/TOC.astro

@@ -1,7 +1,13 @@
 ---
 import TableOfContents from "./toc";
 import type { ConfigHeading, TypeTOC } from "./types.d.ts";
-import type { TypeData } from "@config/io/types";
+import type {
+  TypeData,
+  QuickshellFunction,
+  // QuickshellSignal,
+  // QuickshellVariant,
+  // QuickshellProps,
+} from "@config/_types";
 
 export interface Props {
   title?: string;
@@ -12,13 +18,16 @@ export interface Props {
 
 const { title, headings, type, mobile } = Astro.props;
 
-const types: TypeTOC | null = type ? {
-  properties: Object.keys(type.properties ?? {}),
-  functions: (type.functions ?? []).map(f => f.name),
-  signals: Object.keys(type.signals ?? {}),
-  variants: Object.keys(type.variants ?? {}),
-} : null;
+const types: TypeTOC | null = type
+  ? {
+      properties: Object.keys(type.properties ?? {}),
+      functions: (type.functions ?? []).map((f: QuickshellFunction) => f.name),
+      signals: Object.keys(type.signals ?? {}),
+      variants: Object.keys(type.variants ?? {}),
+    }
+  : null;
 ---
+
 {((headings?.length ?? 0) != 0 || types) &&
   <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
     <TableOfContents
@@ -28,5 +37,4 @@ const types: TypeTOC | null = type ? {
       mobile={mobile}
       client:idle
     />
-  </div>
-}
+  </div>}

src/components/navigation/sidebars/nav/Link.astro

@@ -10,6 +10,7 @@ interface Props {
 
 const { title, link, current, showIcon } = Astro.props;
 ---
+
 <a class=`nav-component nav-item nav-link ${current ? "nav-current" : ""}` href={link}>
   { showIcon ? (
     <div>

src/components/navigation/sidebars/nav/NavCollapsible.astro

@@ -9,6 +9,7 @@ interface Props {
 }
 const { title, link, current } = Astro.props;
 ---
+
 <Accordion class=`nav-component nav-collapsible ${current ? "nav-current" : ""}` {...(current ? { open: "_" } : {})}>
   <div slot="header">
     <a class=`nav-link ${current ? "nav-current" : ""}` href={link}>{title}</a>
@@ -16,5 +17,5 @@ const { title, link, current } = Astro.props;
       <Fragment set:html={navMarker}/>
     </div>
   </div>
-  <slot>
+  <slot />
 </Accordion>

src/components/navigation/sidebars/nav/RootNav.astro

@@ -13,19 +13,25 @@ import Link from "./Link.astro";
 
 const versions = await getVersionsData();
 const versionName = Astro.params.version;
-const modules = versions.versions.find(version => version.name === versionName)?.modules;
+const modules = versions.versions.find(
+  version => version.name === versionName
+)?.modules;
 
-const currentPath = Astro.url.pathname.split('/').filter(s => s !== "");
+const currentPath = Astro.url.pathname.split("/").filter(s => s !== "");
 
 const guidePages = await getGuideCollection(versionName ?? "");
 
 interface NavTree {
-  title: string,
-  slug: string,
-  entries?: NavTree[],
+  title: string;
+  slug: string;
+  entries?: NavTree[];
 }
 
-function mkTree(mount: string, pathIdx: number, { title, slug, entries }: NavTree): TreeEntry {
+function mkTree(
+  mount: string,
+  pathIdx: number,
+  { title, slug, entries }: NavTree
+): TreeEntry {
   const link = `${mount}/${slug}`;
 
   return {
@@ -38,7 +44,9 @@ function mkTree(mount: string, pathIdx: number, { title, slug, entries }: NavTre
 
 function genGuideNav(base: string): NavTree[] | undefined {
   const pages = guidePages
-    .filter(page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index")
+    .filter(
+      page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index"
+    )
     .sort((a, b) => a.data.index - b.data.index)
     .map(page => ({
       title: page.data.title,
@@ -68,8 +76,8 @@ if (versionName) {
         entries: module.types.map(type => ({
           title: type.name,
           slug: type.name,
-        }))
-      }))
+        })),
+      })),
     }),
   };
 
@@ -84,6 +92,7 @@ if (versionName) {
   };
 }
 ---
+
 <nav class="navtree">
   <Link
     title="About"
@@ -95,9 +104,9 @@ if (versionName) {
     link="/changelog"
     current={currentPath.length === 1 && currentPath[0] === "changelog"}
   />
-  { versionedEntries && <Tree {...versionsTree as TreeEntry}/>}
-  <hr/>
-  { versionedEntries && (
+  {versionedEntries && <Tree {...versionsTree as TreeEntry}/>}
+  <hr>
+  {versionedEntries && (
     <Tree {...versionedEntries.guide}/>
     <Tree {...versionedEntries.types}/>
     <Link
@@ -111,7 +120,7 @@ if (versionName) {
       showIcon={true}
     />
   )}
-  { !versionedEntries && versions.versions.map(version => (
+  {!versionedEntries && versions.versions.map(version => (
     <Link
       title={`Quickshell Documentation (${version.name})`}
       link={`/docs/${version.name}/guide`}

src/components/navigation/sidebars/nav/SidebarWrapper.tsx

@@ -32,6 +32,7 @@ const NavComponent: Component<SidebarContent> = props => {
     if (
       isLink ||
       !isInBody ||
+      //@ts-expect-error
       (isInBody && !navRef.contains(event.target as Node))
     ) {
       setOpen(false);

src/components/navigation/sidebars/nav/Tree.astro

@@ -14,6 +14,7 @@ interface Props extends TreeEntry {}
 
 const { title, link, entries, current } = Astro.props;
 ---
+
 <NavCollapsible title={title} link={link} current={current ?? false}>
   {entries?.map(entry => entry.entries ? (
     <Self {...entry}/>

src/components/navigation/sidebars/nav/index.astro

@@ -8,6 +8,7 @@ export interface Props {
 
 const { mobile } = Astro.props;
 ---
+
 <aside class=`nav-wrapper${mobile ? "-mobile" : ""} id="nav"`>
   { mobile ? (
     <SidebarWrapper client:load>

src/components/navigation/sidebars/toc/Table.tsx

@@ -20,10 +20,12 @@ export const Table: Component<{
   if (configTOC) {
     return (
       <div class="toc-content">
-        {title && <>
-          <p>{title}</p>
-          <hr/>
-        </>}
+        {title && (
+          <>
+            <p>{title}</p>
+            <hr />
+          </>
+        )}
         <For each={configTOC}>
           {heading => (
             <Heading

src/components/navigation/sidebars/toc/i.tsx.bak

@@ -1,52 +0,0 @@
-import { createSignal, type Component } from "solid-js";
-
-import { Article } from "@icons";
-import { Table } from "./Table";
-import type {
-  TOCProps,
-  TypeTOC,
-  ConfigHeading,
-} from "../types";
-import { buildHierarchy } from "@config/io/helpers";
-
-const TableOfContents: Component<TOCProps> = props => {
-  const [open, setOpen] = createSignal<boolean>(false);
-  const [typeProps] = createSignal<TypeTOC | undefined>(
-    props.type
-  );
-  const [configProps] = createSignal<
-    ConfigHeading[] | undefined
-  >(props.config);
-
-  function toggle(e: MouseEvent) {
-    e.preventDefault();
-    setOpen(!open());
-  }
-
-  if (!props.mobile) {
-    return typeProps() ? (
-      <Table typeTOC={typeProps()} />
-    ) : (
-      <Table configTOC={buildHierarchy(configProps()!)} />
-    );
-  }
-
-  return (
-    <div class="menu-toggle">
-      <div onclick={e => toggle(e)}>
-        <Article />
-      </div>
-      <div class={`menu-items ${open() ? "shown" : ""}`}>
-        {typeProps() ? (
-          <Table typeTOC={typeProps()} />
-        ) : (
-          <Table
-            configTOC={buildHierarchy(configProps()!)}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TableOfContents;

src/components/navigation/sidebars/toc/index.tsx

@@ -6,7 +6,7 @@ import {
   type Component,
 } from "solid-js";
 
-import { Article } from "@icons";
+import { Article, MenuToX } from "@icons";
 import { Table } from "./Table";
 import type { TOCProps } from "../types";
 import { buildHierarchy } from "@config/io/helpers";
@@ -27,7 +27,10 @@ const TableOfContents: Component<TOCProps> = props => {
     return type ? (
       <Table typeTOC={type} />
     ) : (
-      <Table title={title} configTOC={buildHierarchy(config!)} />
+      <Table
+        title={title}
+        configTOC={buildHierarchy(config!)}
+      />
     );
   }
 
@@ -37,6 +40,7 @@ const TableOfContents: Component<TOCProps> = props => {
     if (
       isLink ||
       !isInBody ||
+      //@ts-expect-error
       (isInBody && !tocRef.contains(event.target as Node))
     ) {
       setOpen(false);
@@ -92,13 +96,17 @@ const TableOfContents: Component<TOCProps> = props => {
       id="toc-toggle"
     >
       <div onclick={e => toggle(e)}>
-        <Article />
+        <Article class={`toc-icon ${!open() ? "active" : ""}`} />
+        <MenuToX class={`toc-icon ${open() ? "active" : ""}`} />
       </div>
       <div class={`toc-mobile ${open() ? "shown" : ""}`}>
         {type ? (
           <Table typeTOC={type} />
         ) : (
-          <Table title={title} configTOC={buildHierarchy(config!)} />
+          <Table
+            title={title}
+            configTOC={buildHierarchy(config!)}
+          />
         )}
       </div>
     </div>