style(app): change colors

apps/app/src/components/Sidebar.tsx

@@ -1,17 +1,25 @@
-import { FileStackIcon } from 'lucide-react'
+import { ChevronRightIcon, FileStackIcon } from 'lucide-react'
 
 import {
   Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
   Sidebar as SidebarComp,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
   SidebarHeader,
   SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
 } from '@boring.tools/ui'
 import { Link } from '@tanstack/react-router'
+import { useChangelogList } from '../hooks/useChangelog'
 import { SidebarUser } from './SidebarUser'
 
 const items = [
@@ -24,6 +32,7 @@ const items = [
 ]
 
 export function Sidebar() {
+  const { data, error } = useChangelogList()
   return (
     <SidebarComp>
       <SidebarHeader>
@@ -49,13 +58,15 @@ export function Sidebar() {
               <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
                 <SidebarMenuItem>
                   <SidebarMenuButton asChild tooltip={item.title}>
-                    <Link to={item.url}>
+                    <Link
+                      to={item.url}
+                      activeProps={{ className: 'bg-sidebar-accent' }}
+                    >
                       <item.icon />
                       <span>{item.title}</span>
                     </Link>
                   </SidebarMenuButton>
-                  {/* {item.items?.length ? (
+
-                    <>
                   <CollapsibleTrigger asChild>
                     <SidebarMenuAction className="data-[state=open]:rotate-90">
                       <ChevronRightIcon />
@@ -64,19 +75,23 @@ export function Sidebar() {
                   </CollapsibleTrigger>
                   <CollapsibleContent>
                     <SidebarMenuSub>
-                          {item.items?.map((subItem) => (
+                      {!error &&
-                            <SidebarMenuSubItem key={subItem.title}>
+                        data?.map((changelog) => (
+                          <SidebarMenuSubItem key={changelog.id}>
                             <SidebarMenuSubButton asChild>
-                                <Link to={subItem.url}>
+                              <Link
-                                  <span>{subItem.title}</span>
+                                to={`/changelog/${changelog.id}`}
+                                activeProps={{
+                                  className: 'bg-sidebar-primary',
+                                }}
+                              >
+                                <span>{changelog.title}</span>
                               </Link>
                             </SidebarMenuSubButton>
                           </SidebarMenuSubItem>
                         ))}
                     </SidebarMenuSub>
                   </CollapsibleContent>
-                    </>
-                  ) : null} */}
                 </SidebarMenuItem>
               </Collapsible>
             ))}

apps/app/src/hooks/useChangelog.ts

@@ -88,6 +88,9 @@ export const useChangelogUpdate = () => {
       queryClient.invalidateQueries({
         queryKey: ['changelogById', data.id],
       })
+      queryClient.invalidateQueries({
+        queryKey: ['changelogList'],
+      })
     },
   })
 }

apps/app/src/routes/__root.tsx

@@ -14,7 +14,9 @@ export const Route = createRootRoute({
       <SignedIn>
         <Layout>
           <Outlet />
-          {!import.meta.env.PROD && <TanStackRouterDevtools />}
+          {!import.meta.env.PROD && (
+            <TanStackRouterDevtools position="bottom-right" />
+          )}
         </Layout>
       </SignedIn>
     </>

apps/app/tailwind.config.js

@@ -51,6 +51,16 @@ export default {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',