Skip to content

UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Matia-R merged 4 commits into from
Jan 29, 2026
Merged

UI redesign 2 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2d128e
first commit
Matia-R Jan 2, 2026
263c6d4
initial inset exploration
Matia-R Jan 8, 2026
f8b6cdf
new UI layout
Matia-R Jan 29, 2026
bb37dfb
formatter changes
Matia-R Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file addedpublic/dark_favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file addedpublic/light_favicon.ico
View file
Open in desktop
Binary file not shown.
161 changes: 95 additions & 66 deletions src/app/_components/app-sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
SidebarMenuItem,
SidebarFooter,
useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
initialDocuments: { id: string; name: string }[]
initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
const currentDocumentId = params.documentId as string;
const utils = api.useUtils();
const { toast } = useToast();
const setOpen = useCommandMenuStore((state) => state.setOpen)
const setOpen = useCommandMenuStore((state) => state.setOpen);
const { isMobile, setOpenMobile } = useSidebar();

// State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
const scrollAreaRef = React.useRef<HTMLDivElement>(null);

// Handle scroll events to detect when user is not at top or bottom
const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
const target = event.currentTarget;
setShowTopShadow(target.scrollTop > 0);
setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
}, []);
const handleScroll = React.useCallback(
(event: React.UIEvent<HTMLDivElement>) => {
const target = event.currentTarget;
setShowTopShadow(target.scrollTop > 0);
setShowBottomShadow(
target.scrollTop + target.clientHeight < target.scrollHeight - 1,
);
},
[],
);

// Use TRPC query to keep documents in sync
const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
initialData: { success: true, documents: initialDocuments },
refetchOnMount: true
});
const { data: documents } =
api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
initialData: { success: true, documents: initialDocuments },
refetchOnMount: true,
});

// Ensure shadow state is correct on mount and when content changes
React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
// Invalidate both the document list and the new document
await Promise.all([
utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
utils.document.getDocumentById.prefetch(doc.id)
utils.document.getDocumentById.prefetch(doc.id),
]);
router.push(`/documents/${doc.id}`);
}
else {
} else {
toast({
title: "Failed to create document",
description: "The document was created but returned an invalid ID."
description: "The document was created but returned an invalid ID.",
});
}
},
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
toast({
variant: "destructive",
title: "Failed to create document",
description: error instanceof Error ? error.message : "An unexpected error occurred"
description:
error instanceof Error
? error.message
: "An unexpected error occurred",
});
}
},
});

// Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
}, [documents?.documents, utils, currentDocumentId]);

return (
<Sidebar variant="sidebar" {...props}>
<Sidebar variant="inset" {...props}>
<div className="flex h-full flex-col">
<div className="flex-none">
<SidebarHeader>
<div className="font-semibold text-xl font-sans px-1">Chptr</div>
<div className="pt-2">
<div className="mb-2">
<SidebarHeader className="pb-0">
<div className="px-1 font-lora text-2xl font-medium">Chptr</div>
<div className="py-6">
<div className="space-y-2">
<Button
className="h-9 w-full justify-between gap-2 px-2"
variant="ghost"
onClick={() => setOpen(true)}
>
<div className="flex items-center gap-2">
<Search className="size-4" />
<span className="text-sm">Search</span>
</div>
<span className="text-xs text-muted-foreground">⌘K</span>
</Button>
<Button
className="w-full justify-start gap-2"
variant="outline"
onClick={() => createDocument.mutate()}
disabled={createDocument.status === 'pending'}
className="h-9 w-full justify-start gap-2 px-2"
variant="ghost"
asChild
>
<Plus className="size-4" />
New
<Link href="/documents">
<Home className="size-4" />
<span className="text-sm">Home</span>
</Link>
</Button>
</div>
</div>
</SidebarHeader>
<SidebarHeader>
<div className="px-2 text-sm font-semibold flex items-center justify-between">
<span>Notes</span>
<button
onClick={() => setOpen(true)}
className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
data-highlight="false"
data-search-button
<SidebarHeader className="pt-0">
<div className="flex items-center justify-between px-2 text-sm font-semibold">
<span>Recents</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => createDocument.mutate()}
disabled={createDocument.status === "pending"}
>
Search ⌘K
</button>
<Plus className="size-4" />
</Button>
</div>
</SidebarHeader>
</div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
onScroll={handleScroll}
>
{showTopShadow && (
<div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
)}
{showBottomShadow && (
<div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
)}
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
<div
className="relative"
style={{
'--item-count': documents?.documents?.length ?? 0,
height: 'calc(var(--item-count) * 48px)'
} as React.CSSProperties}
style={
{
"--item-count": documents?.documents?.length ?? 0,
height: "calc(var(--item-count) * 48px)",
} as React.CSSProperties
}
>
{documents?.documents?.map((doc, index) => (
<SidebarMenuItem
key={doc.id}
className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
style={{
'--index': index,
transform: 'translateY(calc(var(--index) * 48px))'
} as React.CSSProperties}
className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
style={
{
"--index": index,
transform:
"translateY(calc(var(--index) * 48px))",
} as React.CSSProperties
}
>
<SidebarMenuButton asChild>
<Link
href={`/documents/${doc.id}`}
prefetch={true}
onClick={() => {
void utils.document.getDocumentById.invalidate(doc.id);
void utils.document.getDocumentById.invalidate(
doc.id,
);
if (isMobile) {
setOpenMobile(false);
}
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
last_name: userProfile.last_name,
email: userEmail,
avatar_url: userProfile.avatar_url,
default_avatar_background_color: userProfile.default_avatar_background_color,
default_avatar_background_color:
userProfile.default_avatar_background_color,
}}
/>
) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
</div>
</div>
</Sidebar>
)
);
}
4 changes: 2 additions & 2 deletions src/app/_components/command.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
"flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
className
)}
{...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0">
<DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
UI redesign 2 by Matia-R · Pull Request #22 · Matia-R/Chptr · GitHub
Skip to content
UI redesign 2#22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Matia-R
merged 4 commits into

from

Jan 29, 2026
 Merged


UI redesign 2
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
c2d128e

first commit


Matia-R Jan 2, 2026
263c6d4

initial inset exploration


Matia-R Jan 8, 2026
f8b6cdf

new UI layout


Matia-R Jan 29, 2026
bb37dfb

formatter changes


Matia-R Jan 29, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view

Binary file addedpublic/dark_favicon.ico

View file


Open in desktop


Binary file not shown.

Binary file addedpublic/light_favicon.ico

View file


Open in desktop


Binary file not shown.


161 changes: 95 additions & 66 deletions
src/app/_components/app-sidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
"use client"
"use client";

import * as React from "react"
import { Plus} from "lucide-react"
import { api } from "~/trpc/react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import { ScrollArea } from "~/app/_components/scroll-area"
import * as React from "react";
import { Home, Plus, Search } from "lucide-react";
import { api } from "~/trpc/react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { ScrollArea } from "~/app/_components/scroll-area";

import {
 Sidebar,
Expand All@@ -17,16 +17,16 @@ import {
 SidebarMenuItem,
 SidebarFooter,
 useSidebar,
} from "~/app/_components/sidebar"
import { Button } from "./button"
import { type Document } from "~/server/api/routers/document"
import { useToast } from "../../hooks/use-toast"
import { NavUser } from "./nav-user"
import { useCommandMenuStore } from "~/hooks/use-command-menu"
import { useUserProfile } from "~/hooks/use-user-profile"
} from "~/app/_components/sidebar";
import { Button } from "./button";
import { type Document } from "~/server/api/routers/document";
import { useToast } from "../../hooks/use-toast";
import { NavUser } from "./nav-user";
import { useCommandMenuStore } from "~/hooks/use-command-menu";
import { useUserProfile } from "~/hooks/use-user-profile";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 initialDocuments: { id: string; name: string }[]
 initialDocuments: { id: string; name: string }[];
}

export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
Expand All@@ -35,7 +35,7 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const currentDocumentId = params.documentId as string;
 const utils = api.useUtils();
 const { toast } = useToast();
 const setOpen = useCommandMenuStore((state) => state.setOpen)
 const setOpen = useCommandMenuStore((state) => state.setOpen);
 const { isMobile, setOpenMobile } = useSidebar();

 // State to track scroll position for shadow indicators
Expand All@@ -44,17 +44,23 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 const scrollAreaRef = React.useRef<HTMLDivElement>(null);

 // Handle scroll events to detect when user is not at top or bottom
 const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(target.scrollTop + target.clientHeight < target.scrollHeight - 1);
 }, []);
 const handleScroll = React.useCallback(
 (event: React.UIEvent<HTMLDivElement>) => {
 const target = event.currentTarget;
 setShowTopShadow(target.scrollTop > 0);
 setShowBottomShadow(
 target.scrollTop + target.clientHeight < target.scrollHeight - 1,
 );
 },
 [],
 );

 // Use TRPC query to keep documents in sync
 const { data: documents } = api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true
 });
 const { data: documents } =
 api.document.getDocumentIdsForAuthenticatedUser.useQuery(undefined, {
 initialData: { success: true, documents: initialDocuments },
 refetchOnMount: true,
 });

 // Ensure shadow state is correct on mount and when content changes
 React.useEffect(() => {
Expand All@@ -75,14 +81,13 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 // Invalidate both the document list and the new document
 await Promise.all([
 utils.document.getDocumentIdsForAuthenticatedUser.invalidate(),
 utils.document.getDocumentById.prefetch(doc.id)
 utils.document.getDocumentById.prefetch(doc.id),
 ]);
 router.push(`/documents/${doc.id}`);
 }
 else {
 } else {
 toast({
 title: "Failed to create document",
 description: "The document was created but returned an invalid ID."
 description: "The document was created but returned an invalid ID.",
 });
 }
 },
Expand All@@ -91,9 +96,12 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 toast({
 variant: "destructive",
 title: "Failed to create document",
 description: error instanceof Error ? error.message : "An unexpected error occurred"
 description:
 error instanceof Error
 ? error.message
 : "An unexpected error occurred",
 });
 }
 },
 });

 // Setup document data prefetching
Expand All@@ -114,36 +122,49 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 }, [documents?.documents, utils, currentDocumentId]);

 return (
 <Sidebar variant="sidebar" {...props}>
 <Sidebar variant="inset" {...props}>
 <div className="flex h-full flex-col">
 <div className="flex-none">
 <SidebarHeader>
 <div className="font-semibold text-xl font-sans px-1">Chptr</div>
 <div className="pt-2">
 <div className="mb-2">
 <SidebarHeader className="pb-0">
 <div className="px-1 font-lora text-2xl font-medium">Chptr</div>
 <div className="py-6">
 <div className="space-y-2">
 <Button
 className="h-9 w-full justify-between gap-2 px-2"
 variant="ghost"
 onClick={() => setOpen(true)}
 >
 <div className="flex items-center gap-2">
 <Search className="size-4" />
 <span className="text-sm">Search</span>
 </div>
 <span className="text-xs text-muted-foreground">⌘K</span>
 </Button>
 <Button
 className="w-full justify-start gap-2"
 variant="outline"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === 'pending'}
 className="h-9 w-full justify-start gap-2 px-2"
 variant="ghost"
 asChild
 >
 <Plus className="size-4" />
 New
 <Link href="/documents">
 <Home className="size-4" />
 <span className="text-sm">Home</span>
 </Link>
 </Button>
 </div>
 </div>
 </SidebarHeader>
 <SidebarHeader>
 <div className="px-2 text-sm font-semibold flex items-center justify-between">
 <span>Notes</span>
 <button
 onClick={() => setOpen(true)}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors data-[highlight=true]:text-foreground focus-visible:ring-1 focus-visible:ring-ring outline-none"
 data-highlight="false"
 data-search-button
 <SidebarHeader className="pt-0">
 <div className="flex items-center justify-between px-2 text-sm font-semibold">
 <span>Recents</span>
 <Button
 variant="ghost"
 size="icon"
 className="h-6 w-6"
 onClick={() => createDocument.mutate()}
 disabled={createDocument.status === "pending"}
 >
Search ⌘K
 </button>
<Plus className="size-4" />
 </Button>
 </div>
 </SidebarHeader>
 </div>
Expand All@@ -156,36 +177,43 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 onScroll={handleScroll}
 >
 {showTopShadow && (
 <div className="border-t absolute pointer-events-none inset-x-0 top-0 h-4 bg-gradient-to-b from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-4 border-t bg-gradient-to-b from-border/20 to-transparent" />
 )}
 {showBottomShadow && (
 <div className="border-b absolute pointer-events-none inset-x-0 bottom-0 h-4 bg-gradient-to-t from-border/20 to-transparent z-10" />
 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 border-b bg-gradient-to-t from-border/20 to-transparent" />
 )}
 <SidebarContent>
 <SidebarGroup>
 <SidebarMenu>
 <div
 className="relative"
 style={{
 '--item-count': documents?.documents?.length ?? 0,
 height: 'calc(var(--item-count) * 48px)'
 } as React.CSSProperties}
 style={
 {
 "--item-count": documents?.documents?.length ?? 0,
 height: "calc(var(--item-count) * 48px)",
 } as React.CSSProperties
 }
 >
 {documents?.documents?.map((doc, index) => (
 <SidebarMenuItem
 key={doc.id}
 className={`absolute inset-x-0 top-0 transform transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`}
 style={{
 '--index': index,
 transform: 'translateY(calc(var(--index) * 48px))'
 } as React.CSSProperties}
 className={`ease-[cubic-bezier(0.4,0,0.2,1)] absolute inset-x-0 top-0 transform transition-transform duration-300`}
 style={
 {
 "--index": index,
 transform:
 "translateY(calc(var(--index) * 48px))",
 } as React.CSSProperties
 }
 >
 <SidebarMenuButton asChild>
 <Link
 href={`/documents/${doc.id}`}
 prefetch={true}
 onClick={() => {
 void utils.document.getDocumentById.invalidate(doc.id);
 void utils.document.getDocumentById.invalidate(
 doc.id,
 );
 if (isMobile) {
 setOpenMobile(false);
 }
Expand DownExpand Up@@ -213,7 +241,8 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 last_name: userProfile.last_name,
 email: userEmail,
 avatar_url: userProfile.avatar_url,
 default_avatar_background_color: userProfile.default_avatar_background_color,
 default_avatar_background_color:
 userProfile.default_avatar_background_color,
 }}
 />
 ) : (
Expand All@@ -223,5 +252,5 @@ export function AppSidebar({ initialDocuments, ...props }: AppSidebarProps) {
 </div>
 </div>
 </Sidebar>
 )
 );
}

4 changes: 2 additions & 2 deletions
src/app/_components/command.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ const Command = React.forwardRef<
 <CommandPrimitive
 ref={ref}
 className={cn(
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 "flex h-full w-full flex-col overflow-hidden rounded-md bg-sidebar text-sidebar-foreground",
 className
 )}
 {...props}
Expand All@@ -26,7 +26,7 @@ Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
 return (
 <Dialog {...props}>
 <DialogContent className="overflow-hidden p-0">
 <DialogContent className="overflow-hidden border-sidebar-border bg-sidebar p-0">
 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 {children}
 </Command>
Expand Down
Loading