mirror of
https://github.com/linsa-io/linsa.git
synced 2026-04-23 00:38:39 +02:00
Setup (#112)
* wip * wip * wip3 * chore: utils * feat: add command * wip * fix: key duplicate * fix: move and check * fix: use react-use instead * fix: sidebar * chore: make dynamic * chore: tablet mode * chore: fix padding * chore: link instead of inbox * fix: use dnd kit * feat: add select component * chore: use atom * refactor: remove dnd provider * feat: disabled drag when sort is not manual * search route * . * feat: accessibility * fix: search * . * . * . * fix: sidebar collapsed * ai search layout * . * . * . * . * ai responsible content * . * . * . * . * . * global topic route * global topic correct route * topic buttons * sidebar search navigation * ai * Update jazz * . * . * . * . * . * learning status * . * . * chore: content header * fix: pointer none when dragging. prevent auto click after drag end * fix: confirm * fix: prevent drag when editing * chore: remove unused fn * fix: check propagation * chore: list * chore: tweak sonner * chore: update stuff * feat: add badge * chore: close edit when create * chore: escape on manage form * refactor: remove learn path * css: responsive item * chore: separate pages and topic * reafactor: remove new-schema * feat(types): extend jazz type so it can be nullable * chore: use new types * fix: missing deps * fix: link * fix: sidebar in layout * fix: quotes * css: use medium instead semi * Actual streaming and rendering markdown response * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * chore: metadata * feat: la-editor * . * fix: editor and page * . * . * . * . * . * . * fix: remove link * chore: page sidebar * fix: remove 'replace with learning status' * fix: link * fix: link * chore: update schema * chore: use new schema * fix: instead of showing error, just do unique slug * feat: create slug * refactor apply * update package json * fix: schema personal page * chore: editor * feat: pages * fix: metadata * fix: jazz provider * feat: handling data * feat: page detail * chore: server page to id * chore: use id instead of slug * chore: update content header * chore: update link header implementation * refactor: global.css * fix: la editor use animation frame * fix: editor export ref * refactor: page detail * chore: tidy up schema * chore: adapt to new schema * fix: wrap using settimeout * fix: wrap using settimeout * . * . --------- Co-authored-by: marshennikovaolga <marshennikova@gmail.com> Co-authored-by: Nikita <github@nikiv.dev> Co-authored-by: Anselm <anselm.eickhoff@gmail.com> Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>
This commit is contained in:
Aslam
88
web/components/custom/ai-search.tsx
Normal file
88
web/components/custom/ai-search.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
"use client"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import * as smd from "streaming-markdown"
|
||||
|
||||
interface AiSearchProps {
|
||||
searchQuery: string
|
||||
}
|
||||
|
||||
const AiSearch: React.FC<AiSearchProps> = (props: { searchQuery: string }) => {
|
||||
const [error, setError] = useState<string>("")
|
||||
|
||||
let root_el = React.useRef<HTMLDivElement | null>(null)
|
||||
|
||||
let [parser, md_el] = React.useMemo(() => {
|
||||
let md_el = document.createElement("div")
|
||||
let renderer = smd.default_renderer(md_el)
|
||||
let parser = smd.parser(renderer)
|
||||
return [parser, md_el]
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (root_el.current) {
|
||||
root_el.current.appendChild(md_el)
|
||||
}
|
||||
}, [root_el.current, md_el])
|
||||
|
||||
useEffect(() => {
|
||||
let question = props.searchQuery
|
||||
|
||||
fetchData()
|
||||
async function fetchData() {
|
||||
let response: Response
|
||||
try {
|
||||
response = await fetch("/api/search-stream", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ question: question })
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error)
|
||||
setError("Error fetching data")
|
||||
return
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
console.error("Response has no body")
|
||||
setError("Response has no body")
|
||||
return
|
||||
}
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
while (true) {
|
||||
let res = await reader.read()
|
||||
|
||||
if (res.value) {
|
||||
let text = decoder.decode(res.value)
|
||||
smd.parser_write(parser, text)
|
||||
}
|
||||
|
||||
if (res.done) {
|
||||
smd.parser_end(parser)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [props.searchQuery, parser])
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center">
|
||||
<div className="w-full rounded-lg bg-inherit p-6 text-white">
|
||||
<div className="mb-6 rounded-lg bg-blue-700 p-4">
|
||||
<h2 className="text-lg font-medium">✨ This is what I have found:</h2>
|
||||
</div>
|
||||
<div className="rounded-xl bg-[#121212] p-4" ref={root_el}></div>
|
||||
</div>
|
||||
<p className="text-md pb-5 font-semibold opacity-50">{error}</p>
|
||||
<button className="text-md rounded-2xl bg-neutral-800 px-6 py-3 font-semibold text-opacity-50 shadow-inner shadow-neutral-700/50 transition-colors hover:bg-neutral-700">
|
||||
Ask Community
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AiSearch
|
||||
61
web/components/custom/content-header.tsx
Normal file
61
web/components/custom/content-header.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
|
||||
import React from "react"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Button } from "../ui/button"
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
import { useAtom } from "jotai"
|
||||
import { isCollapseAtom, toggleCollapseAtom } from "@/store/sidebar"
|
||||
import { useMedia } from "react-use"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type ContentHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title">
|
||||
|
||||
export const ContentHeader = React.forwardRef<HTMLDivElement, ContentHeaderProps>(
|
||||
({ children, className, ...props }, ref) => {
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
"flex min-h-10 min-w-0 max-w-[100vw] shrink-0 items-center gap-3 border border-b pl-8 pr-6 transition-opacity max-lg:pl-4 max-lg:pr-5",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
ContentHeader.displayName = "ContentHeader"
|
||||
|
||||
export const SidebarToggleButton: React.FC = () => {
|
||||
const [isCollapse] = useAtom(isCollapseAtom)
|
||||
const [, toggle] = useAtom(toggleCollapseAtom)
|
||||
const isTablet = useMedia("(max-width: 1024px)")
|
||||
|
||||
if (!isCollapse && !isTablet) return null
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
toggle()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
aria-label="Menu"
|
||||
className="text-primary/60 z-50"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<PanelLeftIcon size={16} />
|
||||
</Button>
|
||||
<Separator orientation="vertical" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
166
web/components/custom/demo-auth.tsx
Normal file
166
web/components/custom/demo-auth.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { BrowserDemoAuth, AuthProvider } from "jazz-browser"
|
||||
import { Account, CoValueClass, ID } from "jazz-tools"
|
||||
import { AgentSecret } from "cojson"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
// Types
|
||||
export type AuthState = "loading" | "ready" | "signedIn"
|
||||
|
||||
export type ReactAuthHook<Acc extends Account> = (setJazzAuthState: (state: AuthState) => void) => {
|
||||
auth: AuthProvider<Acc>
|
||||
AuthUI: React.ReactNode
|
||||
logOut?: () => void
|
||||
}
|
||||
|
||||
type DemoAuthProps<Acc extends Account = Account> = {
|
||||
accountSchema?: CoValueClass<Acc> & typeof Account
|
||||
appName: string
|
||||
appHostname?: string
|
||||
Component?: DemoAuth.Component
|
||||
seedAccounts?: {
|
||||
[name: string]: { accountID: ID<Account>; accountSecret: AgentSecret }
|
||||
}
|
||||
}
|
||||
|
||||
type AuthComponentProps = {
|
||||
appName: string
|
||||
loading: boolean
|
||||
existingUsers: string[]
|
||||
logInAs: (existingUser: string) => void
|
||||
signUp: (username: string) => void
|
||||
}
|
||||
|
||||
// Main DemoAuth function
|
||||
export function DemoAuth<Acc extends Account = Account>({
|
||||
accountSchema = Account as CoValueClass<Acc> & typeof Account,
|
||||
appName,
|
||||
appHostname,
|
||||
Component = DemoAuth.BasicUI,
|
||||
seedAccounts
|
||||
}: DemoAuthProps<Acc>): ReactAuthHook<Acc> {
|
||||
return function useLocalAuth(setJazzAuthState) {
|
||||
const [authState, setAuthState] = useState<AuthState>("loading")
|
||||
const [existingUsers, setExistingUsers] = useState<string[]>([])
|
||||
const [logInAs, setLogInAs] = useState<(existingUser: string) => void>(() => () => {})
|
||||
const [signUp, setSignUp] = useState<(username: string) => void>(() => () => {})
|
||||
const [logOut, setLogOut] = useState<(() => void) | undefined>(undefined)
|
||||
const [logOutCounter, setLogOutCounter] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
setJazzAuthState(authState)
|
||||
}, [authState, setJazzAuthState])
|
||||
|
||||
const auth = useMemo(() => {
|
||||
return new BrowserDemoAuth<Acc>(
|
||||
accountSchema,
|
||||
{
|
||||
onReady(next) {
|
||||
setAuthState("ready")
|
||||
setExistingUsers(next.existingUsers)
|
||||
setLogInAs(() => next.logInAs)
|
||||
setSignUp(() => next.signUp)
|
||||
},
|
||||
onSignedIn(next) {
|
||||
setAuthState("signedIn")
|
||||
setLogOut(() => () => {
|
||||
next.logOut()
|
||||
setAuthState("loading")
|
||||
setLogOutCounter(c => c + 1)
|
||||
})
|
||||
}
|
||||
},
|
||||
appName,
|
||||
seedAccounts
|
||||
)
|
||||
}, [])
|
||||
|
||||
const AuthUI = (
|
||||
<Component
|
||||
appName={appName}
|
||||
loading={authState === "loading"}
|
||||
existingUsers={existingUsers}
|
||||
logInAs={logInAs}
|
||||
signUp={signUp}
|
||||
/>
|
||||
)
|
||||
|
||||
return { auth, AuthUI, logOut }
|
||||
}
|
||||
}
|
||||
|
||||
const DemoAuthBasicUI: React.FC<AuthComponentProps> = ({ appName, existingUsers, logInAs, signUp }) => {
|
||||
const [username, setUsername] = useState<string>("")
|
||||
const darkMode = useDarkMode()
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-full flex-col justify-center">
|
||||
<div className="mx-auto h-full w-full max-w-sm space-y-6 p-4">
|
||||
<h1 className="text-center font-semibold">{appName}</h1>
|
||||
<SignUpForm username={username} setUsername={setUsername} signUp={signUp} darkMode={darkMode} />
|
||||
<ExistingUsersList existingUsers={existingUsers} logInAs={logInAs} darkMode={darkMode} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Helper components
|
||||
const SignUpForm: React.FC<{
|
||||
username: string
|
||||
setUsername: (value: string) => void
|
||||
signUp: (username: string) => void
|
||||
darkMode: boolean
|
||||
}> = ({ username, setUsername, signUp, darkMode }) => (
|
||||
<form
|
||||
onSubmit={e => {
|
||||
e.preventDefault()
|
||||
signUp(username)
|
||||
}}
|
||||
className="flex flex-col gap-y-4"
|
||||
>
|
||||
<Input
|
||||
placeholder="Display name"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
autoComplete="webauthn"
|
||||
/>
|
||||
<Button type="submit">Sign Up as new account</Button>
|
||||
</form>
|
||||
)
|
||||
|
||||
const ExistingUsersList: React.FC<{
|
||||
existingUsers: string[]
|
||||
logInAs: (user: string) => void
|
||||
darkMode: boolean
|
||||
}> = ({ existingUsers, logInAs, darkMode }) => (
|
||||
<div className="flex flex-col gap-y-2">
|
||||
{existingUsers.map(user => (
|
||||
<Button key={user} onClick={() => logInAs(user)}>
|
||||
Log In as "{user}"
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
// Hooks
|
||||
const useDarkMode = () => {
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
setDarkMode(mediaQuery.matches)
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => setDarkMode(e.matches)
|
||||
mediaQuery.addEventListener("change", handler)
|
||||
return () => mediaQuery.removeEventListener("change", handler)
|
||||
}, [])
|
||||
|
||||
return darkMode
|
||||
}
|
||||
|
||||
// DemoAuth namespace
|
||||
export namespace DemoAuth {
|
||||
export type Component = React.FC<AuthComponentProps>
|
||||
export const BasicUI = DemoAuthBasicUI
|
||||
}
|
||||
57
web/components/custom/logo.tsx
Normal file
57
web/components/custom/logo.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import * as React from "react"
|
||||
|
||||
interface Logo extends React.SVGProps<SVGSVGElement> {}
|
||||
|
||||
export const Logo = ({ className, ...props }: Logo) => {
|
||||
return (
|
||||
<svg width="35" height="35" viewBox="0 0 30 30" fill="none" className={className} {...props}>
|
||||
<g clipPath="url(#clip0_7502_1806)">
|
||||
<g opacity="0.7">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M21.0784 28.966C22.2824 28.4786 23.4001 27.8248 24.4023 27.0309C23.3266 27.824 22.8358 28.1863 21.4672 28.855C21.1737 28.9845 20.7834 29.1589 20.4862 29.2776C20.7374 29.1817 20.9384 29.0775 21.0784 28.966ZM21.0784 28.966C21.9873 28.2464 20.0201 27.5006 16.6827 27.3016C13.3458 27.1024 9.90278 27.5248 8.99303 28.2455C8.53799 28.6055 8.80403 28.9727 9.60135 29.2735C8.65457 28.8758 8.5333 28.8244 7.8472 28.4597C6.75696 27.8168 6.58962 27.7185 5.73927 27.0742L4.92993 26.3942C4.52809 26.0366 4.52726 25.6534 5.00506 25.274C6.5144 24.0787 12.2291 23.3778 17.7679 23.708C23.2115 24.0331 26.4595 25.2334 25.1377 26.4094L24.4023 27.0309C23.4001 27.8248 22.2824 28.4786 21.0784 28.966ZM28.3512 22.3353C29.1155 20.9354 25.0453 19.584 18.5582 19.1967C11.4141 18.7709 4.0449 19.6752 2.09828 21.2168C1.63169 21.5863 1.51866 21.9584 1.71466 22.3174L1.24738 21.3808C0.661456 19.9547 0.637998 19.8993 0.411012 19.0759C0.290928 18.5604 0.132822 17.8708 0.0436785 17.3489C-0.00522774 17.0334 0.161581 16.7104 0.566459 16.3893C2.74386 14.6655 10.9842 13.6538 18.9722 14.1302C25.8065 14.5389 30.2415 15.9033 30.0181 17.3685C29.9229 17.8609 29.799 18.5172 29.6776 19.0027C29.2111 20.51 29.2018 20.5387 28.8566 21.3131L28.3512 22.3353ZM29.8832 11.9702C29.6058 10.6126 25.3295 9.38692 18.9372 9.00544C11.0164 8.53218 2.84438 9.53532 0.686174 11.2447C0.388347 11.4802 0.22062 11.7166 0.173528 11.951C0.310001 11.3893 0.502756 10.6417 0.675563 10.0903C1.23679 8.62642 1.24754 8.59884 1.64202 7.8504L2.07443 7.08959C2.15058 6.96518 2.26721 6.83897 2.42498 6.71374C4.32178 5.21178 11.5008 4.33054 18.4599 4.74618C23.6915 5.05808 27.3098 6.0137 27.9778 7.10736L28.4113 7.86864C29.076 9.24824 29.102 9.30198 29.3797 10.1094C29.5436 10.6635 29.7539 11.4062 29.8832 11.9702ZM24.5623 3.1821C23.6812 2.47343 21.1317 1.88047 17.6199 1.66987C12.3597 1.35668 6.93276 2.02235 5.49908 3.15763C5.49209 3.16281 5.48681 3.16755 5.48041 3.17257L5.65732 3.03037C6.60122 2.33439 7.22384 1.87498 8.5921 1.20633C9.52394 0.795491 9.62105 0.752916 10.3408 0.509223C11.6398 0.0845342 14.0986 -0.130655 16.4976 0.0123293C17.8074 0.0906479 18.8815 0.262207 19.6062 0.485844C20.3846 0.756101 20.569 0.819981 21.3403 1.16385C22.38 1.68628 22.5964 1.79488 23.5716 2.43791C23.8701 2.65971 24.2735 2.94884 24.5623 3.1821Z"
|
||||
fill="white"
|
||||
fillOpacity="0.5"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M21.0784 28.966C22.2824 28.4786 23.4001 27.8248 24.4023 27.0309C23.3266 27.824 22.8358 28.1863 21.4672 28.855C21.1737 28.9845 20.7834 29.1589 20.4862 29.2776C20.7374 29.1817 20.9384 29.0775 21.0784 28.966ZM21.0784 28.966C21.9873 28.2464 20.0201 27.5006 16.6827 27.3016C13.3458 27.1024 9.90278 27.5248 8.99303 28.2455C8.53799 28.6055 8.80403 28.9727 9.60135 29.2735C8.65457 28.8758 8.5333 28.8244 7.8472 28.4597C6.75696 27.8168 6.58962 27.7185 5.73927 27.0742L4.92993 26.3942C4.52809 26.0366 4.52726 25.6534 5.00506 25.274C6.5144 24.0787 12.2291 23.3778 17.7679 23.708C23.2115 24.0331 26.4595 25.2334 25.1377 26.4094L24.4023 27.0309C23.4001 27.8248 22.2824 28.4786 21.0784 28.966ZM28.3512 22.3353C29.1155 20.9354 25.0453 19.584 18.5582 19.1967C11.4141 18.7709 4.0449 19.6752 2.09828 21.2168C1.63169 21.5863 1.51866 21.9584 1.71466 22.3174L1.24738 21.3808C0.661456 19.9547 0.637998 19.8993 0.411012 19.0759C0.290928 18.5604 0.132822 17.8708 0.0436785 17.3489C-0.00522774 17.0334 0.161581 16.7104 0.566459 16.3893C2.74386 14.6655 10.9842 13.6538 18.9722 14.1302C25.8065 14.5389 30.2415 15.9033 30.0181 17.3685C29.9229 17.8609 29.799 18.5172 29.6776 19.0027C29.2111 20.51 29.2018 20.5387 28.8566 21.3131L28.3512 22.3353ZM29.8832 11.9702C29.6058 10.6126 25.3295 9.38692 18.9372 9.00544C11.0164 8.53218 2.84438 9.53532 0.686174 11.2447C0.388347 11.4802 0.22062 11.7166 0.173528 11.951C0.310001 11.3893 0.502756 10.6417 0.675563 10.0903C1.23679 8.62642 1.24754 8.59884 1.64202 7.8504L2.07443 7.08959C2.15058 6.96518 2.26721 6.83897 2.42498 6.71374C4.32178 5.21178 11.5008 4.33054 18.4599 4.74618C23.6915 5.05808 27.3098 6.0137 27.9778 7.10736L28.4113 7.86864C29.076 9.24824 29.102 9.30198 29.3797 10.1094C29.5436 10.6635 29.7539 11.4062 29.8832 11.9702ZM24.5623 3.1821C23.6812 2.47343 21.1317 1.88047 17.6199 1.66987C12.3597 1.35668 6.93276 2.02235 5.49908 3.15763C5.49209 3.16281 5.48681 3.16755 5.48041 3.17257L5.65732 3.03037C6.60122 2.33439 7.22384 1.87498 8.5921 1.20633C9.52394 0.795491 9.62105 0.752916 10.3408 0.509223C11.6398 0.0845342 14.0986 -0.130655 16.4976 0.0123293C17.8074 0.0906479 18.8815 0.262207 19.6062 0.485844C20.3846 0.756101 20.569 0.819981 21.3403 1.16385C22.38 1.68628 22.5964 1.79488 23.5716 2.43791C23.8701 2.65971 24.2735 2.94884 24.5623 3.1821Z"
|
||||
fill="#2358E0"
|
||||
fillOpacity="0.23"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M27.9987 7.21638L27.9694 7.16485C27.9799 7.18199 27.9897 7.19915 27.9987 7.21638ZM2.03707 7.19796C1.32209 8.55782 5.28261 9.86753 11.5833 10.243C18.5427 10.6589 25.7223 9.7775 27.6181 8.27546C28.0664 7.91991 28.1802 7.56156 27.9987 7.21638L28.4028 7.92612C28.7627 8.58433 28.844 8.79507 29.3713 10.1669C29.5443 10.7186 29.737 11.4658 29.8748 12.0277C29.9414 12.3524 29.779 12.6843 29.3622 13.0144C27.2039 14.7239 19.032 15.7269 11.1114 15.254C4.27975 14.8461 -0.133951 13.4745 0.165092 12.0085C0.292434 11.4448 0.502892 10.7026 0.667127 10.1478C0.942429 9.34203 0.955541 9.31502 1.63358 7.90789L2.03707 7.19796ZM2.03707 7.19796C2.04614 7.18077 2.0557 7.16395 2.066 7.14708L2.03707 7.19796ZM0.045561 17.4609C0.361533 18.8224 4.66336 20.0491 11.0801 20.4323C19.0685 20.9088 27.3093 19.8977 29.4861 18.1735C29.7914 17.932 29.9613 17.6896 30.0058 17.4492C29.9224 17.9404 29.7763 18.5793 29.6692 19.0601C29.495 19.766 29.3836 20.0424 28.8482 21.3706L28.3427 22.3928C28.2652 22.5344 28.1382 22.6762 27.9592 22.8181C26.0121 24.3604 18.6437 25.2641 11.4993 24.8381C6.06715 24.5138 2.32874 23.5136 1.70622 22.3749L1.23894 21.4383C0.887668 20.6653 0.878487 20.6365 0.402577 19.1333C0.276244 18.6383 0.144853 17.9746 0.045561 17.4609ZM0.045561 17.4609C0.0414181 17.4428 0.0379656 17.4246 0.0352439 17.4064C0.0385814 17.4245 0.0422712 17.4423 0.045561 17.4609ZM30.0058 17.4492C30.0071 17.4415 30.0084 17.4337 30.0097 17.426C30.0085 17.4337 30.0072 17.4415 30.0058 17.4492ZM4.99103 26.51C4.96674 26.4905 4.94348 26.4712 4.92149 26.4517L4.99103 26.51ZM4.99103 26.51C5.925 27.2536 8.60587 27.8751 12.2925 28.0956C17.8319 28.4256 23.5463 27.7251 25.0556 26.5286C25.0583 26.5265 25.061 26.5244 25.0636 26.5223L24.3938 27.0884C23.2187 28.0069 22.4421 28.4062 21.4587 28.9124C21.1678 29.0473 20.7729 29.2108 20.4778 29.3351C19.1007 29.8594 16.2024 30.1364 13.3806 29.9677C11.7136 29.8677 10.3882 29.632 9.59291 29.331C8.87794 29.0455 8.79946 29.0057 7.83876 28.5171C6.91988 27.9982 6.7843 27.8992 5.73083 27.1317L4.99103 26.51ZM25.0636 26.5223L25.1293 26.4669C25.109 26.4851 25.0867 26.5043 25.0636 26.5223ZM24.5539 3.23958C24.9932 3.59312 25.018 3.97504 24.5411 4.35241C23.1081 5.48738 17.6806 6.15388 12.4195 5.83999C7.18209 5.5271 4.08325 4.3611 5.47197 3.23005L5.64889 3.08786C6.87177 2.14553 7.51627 1.81302 8.58366 1.26382C9.22483 0.968483 9.40031 0.900301 10.1065 0.647417C9.89518 0.730196 9.72456 0.819108 9.605 0.915035C8.79062 1.55997 10.5522 2.22662 13.54 2.40516C16.5276 2.58319 19.6101 2.20556 20.4252 1.56034C20.8352 1.23533 20.589 0.904881 19.8634 0.633557C20.4348 0.830615 20.6321 0.916665 21.3318 1.22133C22.2102 1.62645 22.7484 1.97233 23.5631 2.49539C23.8679 2.70793 24.2581 3.01474 24.5539 3.23958Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M27.9987 7.21638L27.9694 7.16485C27.9799 7.18199 27.9897 7.19915 27.9987 7.21638ZM2.03707 7.19796C1.32209 8.55782 5.28261 9.86753 11.5833 10.243C18.5427 10.6589 25.7223 9.7775 27.6181 8.27546C28.0664 7.91991 28.1802 7.56156 27.9987 7.21638L28.4028 7.92612C28.7627 8.58433 28.844 8.79507 29.3713 10.1669C29.5443 10.7186 29.737 11.4658 29.8748 12.0277C29.9414 12.3524 29.779 12.6843 29.3622 13.0144C27.2039 14.7239 19.032 15.7269 11.1114 15.254C4.27975 14.8461 -0.133951 13.4745 0.165092 12.0085C0.292434 11.4448 0.502892 10.7026 0.667127 10.1478C0.942429 9.34203 0.955541 9.31502 1.63358 7.90789L2.03707 7.19796ZM2.03707 7.19796C2.04614 7.18077 2.0557 7.16395 2.066 7.14708L2.03707 7.19796ZM0.045561 17.4609C0.361533 18.8224 4.66336 20.0491 11.0801 20.4323C19.0685 20.9088 27.3093 19.8977 29.4861 18.1735C29.7914 17.932 29.9613 17.6896 30.0058 17.4492C29.9224 17.9404 29.7763 18.5793 29.6692 19.0601C29.495 19.766 29.3836 20.0424 28.8482 21.3706L28.3427 22.3928C28.2652 22.5344 28.1382 22.6762 27.9592 22.8181C26.0121 24.3604 18.6437 25.2641 11.4993 24.8381C6.06715 24.5138 2.32874 23.5136 1.70622 22.3749L1.23894 21.4383C0.887668 20.6653 0.878487 20.6365 0.402577 19.1333C0.276244 18.6383 0.144853 17.9746 0.045561 17.4609ZM0.045561 17.4609C0.0414181 17.4428 0.0379656 17.4246 0.0352439 17.4064C0.0385814 17.4245 0.0422712 17.4423 0.045561 17.4609ZM30.0058 17.4492C30.0071 17.4415 30.0084 17.4337 30.0097 17.426C30.0085 17.4337 30.0072 17.4415 30.0058 17.4492ZM4.99103 26.51C4.96674 26.4905 4.94348 26.4712 4.92149 26.4517L4.99103 26.51ZM4.99103 26.51C5.925 27.2536 8.60587 27.8751 12.2925 28.0956C17.8319 28.4256 23.5463 27.7251 25.0556 26.5286C25.0583 26.5265 25.061 26.5244 25.0636 26.5223L24.3938 27.0884C23.2187 28.0069 22.4421 28.4062 21.4587 28.9124C21.1678 29.0473 20.7729 29.2108 20.4778 29.3351C19.1007 29.8594 16.2024 30.1364 13.3806 29.9677C11.7136 29.8677 10.3882 29.632 9.59291 29.331C8.87794 29.0455 8.79946 29.0057 7.83876 28.5171C6.91988 27.9982 6.7843 27.8992 5.73083 27.1317L4.99103 26.51ZM25.0636 26.5223L25.1293 26.4669C25.109 26.4851 25.0867 26.5043 25.0636 26.5223ZM24.5539 3.23958C24.9932 3.59312 25.018 3.97504 24.5411 4.35241C23.1081 5.48738 17.6806 6.15388 12.4195 5.83999C7.18209 5.5271 4.08325 4.3611 5.47197 3.23005L5.64889 3.08786C6.87177 2.14553 7.51627 1.81302 8.58366 1.26382C9.22483 0.968483 9.40031 0.900301 10.1065 0.647417C9.89518 0.730196 9.72456 0.819108 9.605 0.915035C8.79062 1.55997 10.5522 2.22662 13.54 2.40516C16.5276 2.58319 19.6101 2.20556 20.4252 1.56034C20.8352 1.23533 20.589 0.904881 19.8634 0.633557C20.4348 0.830615 20.6321 0.916665 21.3318 1.22133C22.2102 1.62645 22.7484 1.97233 23.5631 2.49539C23.8679 2.70793 24.2581 3.01474 24.5539 3.23958Z"
|
||||
fill="url(#paint0_linear_7502_1806)"
|
||||
fillOpacity="0.32"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_7502_1806"
|
||||
x1="23.9069"
|
||||
y1="2.74376"
|
||||
x2="5.97898"
|
||||
y2="27.3127"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="white" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="#2358E0" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_7502_1806">
|
||||
<rect width="30" height="30" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
114
web/components/custom/sidebar/partial/page-section.tsx
Normal file
114
web/components/custom/sidebar/partial/page-section.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { SidebarItem } from "../sidebar"
|
||||
import { z } from "zod"
|
||||
import { useAccount } from "@/lib/providers/jazz-provider"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
|
||||
import { PlusIcon } from "lucide-react"
|
||||
import { generateUniqueSlug } from "@/lib/utils"
|
||||
import { PersonalPage } from "@/lib/schema/personal-page"
|
||||
import { toast } from "sonner"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
|
||||
const createPageSchema = z.object({
|
||||
title: z.string({ message: "Please enter a valid title" }).min(1, { message: "Please enter a valid title" })
|
||||
})
|
||||
|
||||
type PageFormValues = z.infer<typeof createPageSchema>
|
||||
|
||||
export const PageSection: React.FC = () => {
|
||||
const { me } = useAccount()
|
||||
const personalPages = me.root?.personalPages || []
|
||||
|
||||
return (
|
||||
<div className="-ml-2">
|
||||
<div className="group mb-0.5 ml-2 mt-2 flex flex-row items-center justify-between rounded-md">
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className="text-muted-foreground hover:bg-muted/50 flex h-6 grow cursor-default items-center justify-between gap-x-0.5 self-start rounded-md px-1 text-xs font-medium"
|
||||
>
|
||||
<span className="group-hover:text-muted-foreground">Pages</span>
|
||||
<CreatePageForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative shrink-0">
|
||||
<div aria-hidden="false" className="ml-2 shrink-0 pb-2">
|
||||
{personalPages.map(
|
||||
page => page && <SidebarItem key={page.id} url={`/pages/${page.id}`} label={page.title} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CreatePageForm: React.FC = () => {
|
||||
const { me } = useAccount()
|
||||
|
||||
const form = useForm<PageFormValues>({
|
||||
resolver: zodResolver(createPageSchema),
|
||||
defaultValues: {
|
||||
title: ""
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit = (values: PageFormValues) => {
|
||||
try {
|
||||
const personalPages = me?.root?.personalPages?.toJSON() || []
|
||||
const slug = generateUniqueSlug(personalPages, values.title)
|
||||
|
||||
const newPersonalPage = PersonalPage.create(
|
||||
{
|
||||
title: values.title,
|
||||
slug: slug,
|
||||
content: ""
|
||||
},
|
||||
{ owner: me._owner }
|
||||
)
|
||||
|
||||
me.root?.personalPages?.push(newPersonalPage)
|
||||
|
||||
toast.success("Page created successfully")
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Failed to create page")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button type="button" size="icon" variant="ghost" aria-label="New Page" className="size-6">
|
||||
<PlusIcon size={16} />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>New page</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter a title" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" size="sm" className="w-full">
|
||||
Create page
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
100
web/components/custom/sidebar/partial/topic-section.tsx
Normal file
100
web/components/custom/sidebar/partial/topic-section.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { usePathname } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronDown, BookOpen, Bookmark, GraduationCap, Check } from "lucide-react"
|
||||
import { SidebarItem } from "../sidebar"
|
||||
|
||||
const TOPICS = ["Nix", "Javascript", "Kubernetes", "Figma", "Hiring", "Java", "IOS", "Design"]
|
||||
|
||||
export const TopicSection = () => {
|
||||
const [showOptions, setShowOptions] = useState(false)
|
||||
const [selectedStatus, setSelectedStatus] = useState<string | null>(null)
|
||||
const sectionRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const learningOptions = [
|
||||
{ text: "To Learn", icon: <Bookmark size={16} />, color: "text-white/70" },
|
||||
{
|
||||
text: "Learning",
|
||||
icon: <GraduationCap size={16} />,
|
||||
color: "text-[#D29752]"
|
||||
},
|
||||
{
|
||||
text: "Learned",
|
||||
icon: <Check size={16} />,
|
||||
color: "text-[#708F51]"
|
||||
}
|
||||
]
|
||||
|
||||
const statusSelect = (status: string) => {
|
||||
setSelectedStatus(status === "Show All" ? null : status)
|
||||
setShowOptions(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const overlayClick = (event: MouseEvent) => {
|
||||
if (sectionRef.current && !sectionRef.current.contains(event.target as Node)) {
|
||||
setShowOptions(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", overlayClick)
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", overlayClick)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const availableOptions = selectedStatus
|
||||
? [
|
||||
{
|
||||
text: "Show All",
|
||||
icon: <BookOpen size={16} />,
|
||||
color: "text-white"
|
||||
},
|
||||
...learningOptions.filter(option => option.text !== selectedStatus)
|
||||
]
|
||||
: learningOptions
|
||||
|
||||
// const topicClick = (topic: string) => {
|
||||
// router.push(`/${topic.toLowerCase()}`)
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="space-y-1 overflow-hidden" ref={sectionRef}>
|
||||
<Button
|
||||
onClick={() => setShowOptions(!showOptions)}
|
||||
className="bg-accent text-foreground hover:bg-accent/50 flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium"
|
||||
>
|
||||
<span>{selectedStatus ? `Topics: ${selectedStatus}` : "Topics"}</span>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`transform transition-transform duration-200 ease-in-out ${
|
||||
showOptions ? "rotate-0" : "rotate-[-90deg]"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{showOptions && (
|
||||
<div className="rounded-md bg-neutral-800">
|
||||
{availableOptions.map(option => (
|
||||
<Button
|
||||
key={option.text}
|
||||
onClick={() => statusSelect(option.text)}
|
||||
className={`flex w-full items-center justify-start space-x-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-neutral-700 ${option.color} bg-inherit`}
|
||||
>
|
||||
{option.icon && <span className={option.color}>{option.icon}</span>}
|
||||
<span>{option.text}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="scrollbar-hide space-y-1 overflow-y-auto" style={{ maxHeight: "calc(100vh - 200px)" }}>
|
||||
{TOPICS.map(topic => (
|
||||
<SidebarItem key={topic} label={topic} url={`/${topic}`} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopicSection
|
||||
179
web/components/custom/sidebar/sidebar.tsx
Normal file
179
web/components/custom/sidebar/sidebar.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { useMedia } from "react-use"
|
||||
import { useAtom } from "jotai"
|
||||
import { LinkIcon, SearchIcon } from "lucide-react"
|
||||
import { Logo } from "@/components/custom/logo"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { isCollapseAtom } from "@/store/sidebar"
|
||||
|
||||
import { PageSection } from "./partial/page-section"
|
||||
import { TopicSection } from "./partial/topic-section"
|
||||
|
||||
interface SidebarContextType {
|
||||
isCollapsed: boolean
|
||||
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextType>({
|
||||
isCollapsed: false,
|
||||
setIsCollapsed: () => {}
|
||||
})
|
||||
|
||||
const useSidebarCollapse = (isTablet: boolean): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {
|
||||
const [isCollapsed, setIsCollapsed] = useAtom(isCollapseAtom)
|
||||
const pathname = usePathname()
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isTablet) setIsCollapsed(true)
|
||||
}, [pathname, setIsCollapsed, isTablet])
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsCollapsed(isTablet)
|
||||
}, [isTablet, setIsCollapsed])
|
||||
|
||||
return [isCollapsed, setIsCollapsed]
|
||||
}
|
||||
|
||||
interface SidebarItemProps {
|
||||
label: string
|
||||
url: string
|
||||
icon?: React.ReactNode
|
||||
onClick?: () => void
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export const SidebarItem: React.FC<SidebarItemProps> = React.memo(({ label, url, icon, onClick, children }) => {
|
||||
const pathname = usePathname()
|
||||
const isActive = pathname === url
|
||||
|
||||
return (
|
||||
<div className={cn("group relative my-0.5 rounded-md", isActive ? "bg-secondary/80" : "hover:bg-secondary/40")}>
|
||||
<Link
|
||||
className="text-secondary-foreground flex h-8 grow items-center truncate rounded-md pl-1.5 pr-1 text-sm font-medium"
|
||||
href={url}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon && (
|
||||
<span className={cn("text-primary/60 group-hover:text-primary mr-2 size-4", { "text-primary": isActive })}>
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
<span>{label}</span>
|
||||
{children}
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
const LogoAndSearch: React.FC = React.memo(() => {
|
||||
const pathname = usePathname()
|
||||
return (
|
||||
<div className="px-3.5">
|
||||
<div className="mb-1 mt-2 flex h-10 max-w-full items-center">
|
||||
<Link href="/links" className="px-2">
|
||||
<Logo className="size-7" />
|
||||
</Link>
|
||||
<div className="flex min-w-2 grow flex-row" />
|
||||
{pathname === "/search" ? (
|
||||
<Link href="/links">
|
||||
<Button size="sm" variant="secondary" type="button" className="text-md text-primary/60 font-medium">
|
||||
← Back
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/search">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
aria-label="Search"
|
||||
type="button"
|
||||
className="text-primary/60 flex w-20 items-center justify-start py-4 pl-2"
|
||||
>
|
||||
<SearchIcon size={16} className="mr-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
const SidebarContent: React.FC = React.memo(() => {
|
||||
const { isCollapsed } = React.useContext(SidebarContext)
|
||||
const isTablet = useMedia("(max-width: 1024px)")
|
||||
|
||||
return (
|
||||
<nav className="bg-background relative flex h-full w-full shrink-0 flex-col">
|
||||
<div className={cn({ "pt-12": !isCollapsed && isTablet })}>
|
||||
<LogoAndSearch />
|
||||
</div>
|
||||
<div tabIndex={-1} className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3.5">
|
||||
<SidebarItem url="/links" label="Links" icon={<LinkIcon size={16} />} />
|
||||
<div className="h-2 shrink-0" />
|
||||
<PageSection />
|
||||
<TopicSection />
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
})
|
||||
|
||||
export const Sidebar: React.FC = () => {
|
||||
const isTablet = useMedia("(max-width: 1024px)")
|
||||
const [isCollapsed, setIsCollapsed] = useSidebarCollapse(isTablet)
|
||||
|
||||
const sidebarClasses = cn(
|
||||
"h-full overflow-hidden transition-all duration-300 ease-in-out",
|
||||
isCollapsed ? "w-0" : "w-auto min-w-56"
|
||||
)
|
||||
|
||||
const sidebarInnerClasses = cn(
|
||||
"h-full w-auto min-w-56 transition-transform duration-300 ease-in-out",
|
||||
isCollapsed ? "-translate-x-full" : "translate-x-0"
|
||||
)
|
||||
|
||||
const contextValue = React.useMemo(() => ({ isCollapsed, setIsCollapsed }), [isCollapsed, setIsCollapsed])
|
||||
|
||||
if (isTablet) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-30 bg-black/40 transition-opacity duration-300",
|
||||
isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
|
||||
)}
|
||||
onClick={() => setIsCollapsed(true)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed left-0 top-0 z-40 h-full",
|
||||
sidebarClasses,
|
||||
!isCollapsed && "shadow-[4px_0px_16px_rgba(0,0,0,0.1)] transition-all"
|
||||
)}
|
||||
>
|
||||
<div className={cn(sidebarInnerClasses, "border-r-primary/5 border-r")}>
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<SidebarContent />
|
||||
</SidebarContext.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={sidebarClasses}>
|
||||
<div className={sidebarInnerClasses}>
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<SidebarContent />
|
||||
</SidebarContext.Provider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
Reference in New Issue
Block a user