tr]:last:border-b-0",
48 | className
49 | )}
50 | {...props}
51 | />
52 | )
53 | }
54 |
55 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56 | return (
57 | |
65 | )
66 | }
67 |
68 | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
69 | return (
70 | [role=checkbox]]:translate-y-[2px]",
74 | className
75 | )}
76 | {...props}
77 | />
78 | )
79 | }
80 |
81 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
82 | return (
83 | | [role=checkbox]]:translate-y-[2px]",
87 | className
88 | )}
89 | {...props}
90 | />
91 | )
92 | }
93 |
94 | function TableCaption({
95 | className,
96 | ...props
97 | }: React.ComponentProps<"caption">) {
98 | return (
99 |
104 | )
105 | }
106 |
107 | export {
108 | Table,
109 | TableHeader,
110 | TableBody,
111 | TableFooter,
112 | TableHead,
113 | TableRow,
114 | TableCell,
115 | TableCaption,
116 | }
117 |
--------------------------------------------------------------------------------
/web/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Tabs({
9 | className,
10 | ...props
11 | }: React.ComponentProps) {
12 | return (
13 |
18 | )
19 | }
20 |
21 | function TabsList({
22 | className,
23 | ...props
24 | }: React.ComponentProps) {
25 | return (
26 |
34 | )
35 | }
36 |
37 | function TabsTrigger({
38 | className,
39 | ...props
40 | }: React.ComponentProps) {
41 | return (
42 |
50 | )
51 | }
52 |
53 | function TabsContent({
54 | className,
55 | ...props
56 | }: React.ComponentProps) {
57 | return (
58 |
63 | )
64 | }
65 |
66 | export { Tabs, TabsList, TabsTrigger, TabsContent }
67 |
--------------------------------------------------------------------------------
/web/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | interface TextareaProps extends React.ComponentProps<"textarea"> {
6 | error?: boolean
7 | success?: boolean
8 | }
9 |
10 | function Textarea({ className, error, success, ...props }: TextareaProps) {
11 | return (
12 |
25 | )
26 | }
27 |
28 | export { Textarea }
--------------------------------------------------------------------------------
/web/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToastPrimitives from "@radix-ui/react-toast"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ToastProvider = ToastPrimitives.Provider
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 |
24 | ))
25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
26 |
27 | const toastVariants = cva(
28 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
29 | {
30 | variants: {
31 | variant: {
32 | default: "border bg-background text-foreground",
33 | destructive:
34 | "destructive group border-destructive bg-destructive text-destructive-foreground",
35 | },
36 | },
37 | defaultVariants: {
38 | variant: "default",
39 | },
40 | }
41 | )
42 |
43 | const Toast = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 |
54 | )
55 | })
56 | Toast.displayName = ToastPrimitives.Root.displayName
57 |
58 | const ToastAction = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
70 | ))
71 | ToastAction.displayName = ToastPrimitives.Action.displayName
72 |
73 | const ToastClose = React.forwardRef<
74 | React.ElementRef,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
87 |
88 | ))
89 | ToastClose.displayName = ToastPrimitives.Close.displayName
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 |
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 |
103 | const ToastDescription = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 |
115 | type ToastProps = React.ComponentPropsWithoutRef
116 |
117 | type ToastActionElement = React.ReactElement
118 |
119 | export {
120 | type ToastProps,
121 | type ToastActionElement,
122 | ToastProvider,
123 | ToastViewport,
124 | Toast,
125 | ToastTitle,
126 | ToastDescription,
127 | ToastClose,
128 | ToastAction,
129 | }
130 |
--------------------------------------------------------------------------------
/web/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useToast } from "@/hooks/use-toast"
4 | import {
5 | Toast,
6 | ToastClose,
7 | ToastDescription,
8 | ToastProvider,
9 | ToastTitle,
10 | ToastViewport,
11 | } from "@/components/ui/toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | )
31 | })}
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/web/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
5 | import { type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { toggleVariants } from "@/components/ui/toggle"
9 |
10 | const ToggleGroupContext = React.createContext<
11 | VariantProps
12 | >({
13 | size: "default",
14 | variant: "default",
15 | })
16 |
17 | function ToggleGroup({
18 | className,
19 | variant,
20 | size,
21 | children,
22 | ...props
23 | }: React.ComponentProps &
24 | VariantProps) {
25 | return (
26 |
36 |
37 | {children}
38 |
39 |
40 | )
41 | }
42 |
43 | function ToggleGroupItem({
44 | className,
45 | children,
46 | variant,
47 | size,
48 | ...props
49 | }: React.ComponentProps &
50 | VariantProps) {
51 | const context = React.useContext(ToggleGroupContext)
52 |
53 | return (
54 |
68 | {children}
69 |
70 | )
71 | }
72 |
73 | export { ToggleGroup, ToggleGroupItem }
74 |
--------------------------------------------------------------------------------
/web/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | outline:
16 | "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
17 | },
18 | size: {
19 | default: "h-9 px-2 min-w-9",
20 | sm: "h-8 px-1.5 min-w-8",
21 | lg: "h-10 px-2.5 min-w-10",
22 | },
23 | },
24 | defaultVariants: {
25 | variant: "default",
26 | size: "default",
27 | },
28 | }
29 | )
30 |
31 | function Toggle({
32 | className,
33 | variant,
34 | size,
35 | ...props
36 | }: React.ComponentProps &
37 | VariantProps) {
38 | return (
39 |
44 | )
45 | }
46 |
47 | export { Toggle, toggleVariants }
48 |
--------------------------------------------------------------------------------
/web/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentProps) {
12 | return (
13 |
18 | )
19 | }
20 |
21 | function Tooltip({
22 | ...props
23 | }: React.ComponentProps) {
24 | return (
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | function TooltipTrigger({
32 | ...props
33 | }: React.ComponentProps) {
34 | return
35 | }
36 |
37 | function TooltipContent({
38 | className,
39 | sideOffset = 0,
40 | children,
41 | ...props
42 | }: React.ComponentProps) {
43 | return (
44 |
45 |
54 | {children}
55 |
56 |
57 |
58 | )
59 | }
60 |
61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
62 |
--------------------------------------------------------------------------------
/web/components/ui/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(undefined)
7 |
8 | React.useEffect(() => {
9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 | const onChange = () => {
11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 | }
13 | mql.addEventListener("change", onChange)
14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 | return () => mql.removeEventListener("change", onChange)
16 | }, [])
17 |
18 | return !!isMobile
19 | }
20 |
--------------------------------------------------------------------------------
/web/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react"
5 |
6 | import type {
7 | ToastActionElement,
8 | ToastProps,
9 | } from "@/components/ui/toast"
10 |
11 | const TOAST_LIMIT = 1
12 | const TOAST_REMOVE_DELAY = 1000000
13 |
14 | type ToasterToast = ToastProps & {
15 | id: string
16 | title?: React.ReactNode
17 | description?: React.ReactNode
18 | action?: ToastActionElement
19 | }
20 |
21 | const actionTypes = {
22 | ADD_TOAST: "ADD_TOAST",
23 | UPDATE_TOAST: "UPDATE_TOAST",
24 | DISMISS_TOAST: "DISMISS_TOAST",
25 | REMOVE_TOAST: "REMOVE_TOAST",
26 | } as const
27 |
28 | let count = 0
29 |
30 | function genId() {
31 | count = (count + 1) % Number.MAX_SAFE_INTEGER
32 | return count.toString()
33 | }
34 |
35 | type ActionType = typeof actionTypes
36 |
37 | type Action =
38 | | {
39 | type: ActionType["ADD_TOAST"]
40 | toast: ToasterToast
41 | }
42 | | {
43 | type: ActionType["UPDATE_TOAST"]
44 | toast: Partial
45 | }
46 | | {
47 | type: ActionType["DISMISS_TOAST"]
48 | toastId?: ToasterToast["id"]
49 | }
50 | | {
51 | type: ActionType["REMOVE_TOAST"]
52 | toastId?: ToasterToast["id"]
53 | }
54 |
55 | interface State {
56 | toasts: ToasterToast[]
57 | }
58 |
59 | const toastTimeouts = new Map>()
60 |
61 | const addToRemoveQueue = (toastId: string) => {
62 | if (toastTimeouts.has(toastId)) {
63 | return
64 | }
65 |
66 | const timeout = setTimeout(() => {
67 | toastTimeouts.delete(toastId)
68 | dispatch({
69 | type: "REMOVE_TOAST",
70 | toastId: toastId,
71 | })
72 | }, TOAST_REMOVE_DELAY)
73 |
74 | toastTimeouts.set(toastId, timeout)
75 | }
76 |
77 | export const reducer = (state: State, action: Action): State => {
78 | switch (action.type) {
79 | case "ADD_TOAST":
80 | return {
81 | ...state,
82 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
83 | }
84 |
85 | case "UPDATE_TOAST":
86 | return {
87 | ...state,
88 | toasts: state.toasts.map((t) =>
89 | t.id === action.toast.id ? { ...t, ...action.toast } : t
90 | ),
91 | }
92 |
93 | case "DISMISS_TOAST": {
94 | const { toastId } = action
95 |
96 | // ! Side effects ! - This could be extracted into a dismissToast() action,
97 | // but I'll keep it here for simplicity
98 | if (toastId) {
99 | addToRemoveQueue(toastId)
100 | } else {
101 | state.toasts.forEach((toast) => {
102 | addToRemoveQueue(toast.id)
103 | })
104 | }
105 |
106 | return {
107 | ...state,
108 | toasts: state.toasts.map((t) =>
109 | t.id === toastId || toastId === undefined
110 | ? {
111 | ...t,
112 | open: false,
113 | }
114 | : t
115 | ),
116 | }
117 | }
118 | case "REMOVE_TOAST":
119 | if (action.toastId === undefined) {
120 | return {
121 | ...state,
122 | toasts: [],
123 | }
124 | }
125 | return {
126 | ...state,
127 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 | }
129 | }
130 | }
131 |
132 | const listeners: Array<(state: State) => void> = []
133 |
134 | let memoryState: State = { toasts: [] }
135 |
136 | function dispatch(action: Action) {
137 | memoryState = reducer(memoryState, action)
138 | listeners.forEach((listener) => {
139 | listener(memoryState)
140 | })
141 | }
142 |
143 | type Toast = Omit
144 |
145 | function toast({ ...props }: Toast) {
146 | const id = genId()
147 |
148 | const update = (props: ToasterToast) =>
149 | dispatch({
150 | type: "UPDATE_TOAST",
151 | toast: { ...props, id },
152 | })
153 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 |
155 | dispatch({
156 | type: "ADD_TOAST",
157 | toast: {
158 | ...props,
159 | id,
160 | open: true,
161 | onOpenChange: (open) => {
162 | if (!open) dismiss()
163 | },
164 | },
165 | })
166 |
167 | return {
168 | id: id,
169 | dismiss,
170 | update,
171 | }
172 | }
173 |
174 | function useToast() {
175 | const [state, setState] = React.useState(memoryState)
176 |
177 | React.useEffect(() => {
178 | listeners.push(setState)
179 | return () => {
180 | const index = listeners.indexOf(setState)
181 | if (index > -1) {
182 | listeners.splice(index, 1)
183 | }
184 | }
185 | }, [state])
186 |
187 | return {
188 | ...state,
189 | toast,
190 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 | }
192 | }
193 |
194 | export { useToast, toast }
195 |
--------------------------------------------------------------------------------
/web/hooks/use-api.ts:
--------------------------------------------------------------------------------
1 | import useSWR from "swr"
2 | import { hostAPI, vmAPI, storageAPI, type VMDetailed } from "@/lib/api"
3 |
4 | // Host hooks
5 | export function useHostStatus() {
6 | return useSWR("host-status", hostAPI.getStatus, {
7 | refreshInterval: 5000, // Refresh every 5 seconds
8 | revalidateOnFocus: true,
9 | })
10 | }
11 |
12 | export function useHostResources() {
13 | return useSWR("host-resources", hostAPI.getResources, {
14 | refreshInterval: 10000, // Refresh every 10 seconds
15 | revalidateOnFocus: true,
16 | })
17 | }
18 |
19 | // VM hooks
20 | export function useVMs() {
21 | return useSWR("vms", vmAPI.getAll, {
22 | refreshInterval: 3000, // Refresh every 3 seconds for VM list
23 | revalidateOnFocus: true,
24 | })
25 | }
26 |
27 | export function useVM(uuid: string | null) {
28 | return useSWR(uuid ? `vm-${uuid}` : null, () => (uuid ? vmAPI.getById(uuid) : null), {
29 | refreshInterval: 2000, // Refresh every 2 seconds for individual VM
30 | revalidateOnFocus: true,
31 | })
32 | }
33 |
34 | // Storage hooks
35 | export function useStoragePools() {
36 | return useSWR("storage-pools", storageAPI.getPools, {
37 | refreshInterval: 30000, // Refresh every 30 seconds
38 | revalidateOnFocus: true,
39 | })
40 | }
41 |
42 | export function useVolumes(poolName: string | null) {
43 | return useSWR(poolName ? `volumes-${poolName}` : null, () => (poolName ? storageAPI.getVolumes(poolName) : null), {
44 | refreshInterval: 30000,
45 | revalidateOnFocus: true,
46 | })
47 | }
48 |
49 | // Helper function to get optimistic VM state based on action
50 | function getOptimisticVMState(currentVM: any, action: string) {
51 | if (!currentVM) return currentVM
52 |
53 | switch (action) {
54 | case 'start':
55 | return { ...currentVM, state: 'running' }
56 | case 'stop':
57 | case 'shutdown':
58 | return { ...currentVM, state: 'shut off' }
59 | case 'restart':
60 | case 'reset':
61 | // For restart, briefly show as running during the transition
62 | return { ...currentVM, state: 'running' }
63 | case 'pause':
64 | return { ...currentVM, state: 'paused' }
65 | case 'resume':
66 | return { ...currentVM, state: 'running' }
67 | default:
68 | return currentVM
69 | }
70 | }
71 |
72 | // Utility hook for mutations with optimistic updates
73 | export function useApiMutation() {
74 | const { mutate } = useSWR(null) // Get the global mutate function
75 |
76 | const performVMAction = async (uuid: string, action: string) => {
77 | // Get current data for optimistic updates
78 | const currentVM = await mutate(`vm-${uuid}`)
79 | const currentVMs = await mutate("vms")
80 |
81 | // Calculate optimistic state
82 | const optimisticVM = currentVM ? getOptimisticVMState(currentVM, action) : currentVM
83 | const optimisticVMs = currentVMs ? currentVMs.map((vm: any) =>
84 | vm.uuid === uuid ? getOptimisticVMState(vm, action) : vm
85 | ) : currentVMs
86 |
87 | try {
88 | // Apply optimistic update first
89 | if (optimisticVM) {
90 | await mutate(`vm-${uuid}`, optimisticVM)
91 | }
92 |
93 | // Perform the API call
94 | const result = await vmAPI.performAction(uuid, { action: action as any })
95 |
96 | // Also update the VM list optimistically
97 | if (optimisticVMs) {
98 | await mutate("vms", optimisticVMs)
99 | }
100 |
101 | // Revalidate both after successful API call
102 | await mutate(`vm-${uuid}`)
103 | await mutate("vms")
104 |
105 | return result
106 | } catch (error) {
107 | // Revert optimistic updates on error
108 | if (currentVM) {
109 | await mutate(`vm-${uuid}`, currentVM)
110 | }
111 | if (currentVMs) {
112 | await mutate("vms", currentVMs)
113 | }
114 | throw error
115 | }
116 | }
117 |
118 | const deleteVM = async (uuid: string, deleteDisks = false) => {
119 | // Get current data for optimistic updates
120 | const currentVMs = await mutate("vms")
121 |
122 | try {
123 | // Optimistically remove VM from list
124 | if (currentVMs) {
125 | const optimisticVMs = currentVMs.filter((vm: any) => vm.uuid !== uuid)
126 | await mutate("vms", optimisticVMs)
127 | }
128 |
129 | // Clear individual VM cache
130 | await mutate(`vm-${uuid}`, null)
131 |
132 | // Perform the actual API call
133 | await vmAPI.delete(uuid, deleteDisks)
134 |
135 | // Revalidate to ensure consistency
136 | await mutate("vms")
137 | } catch (error) {
138 | // Revert optimistic updates on error
139 | if (currentVMs) {
140 | await mutate("vms", currentVMs)
141 | }
142 | throw error
143 | }
144 | }
145 |
146 | const createVM = async (config: any) => {
147 | try {
148 | // Perform the API call first (since we don't know the new VM details)
149 | const result = await vmAPI.create(config)
150 |
151 | // Revalidate VM list to get the new VM
152 | await mutate("vms")
153 |
154 | return result
155 | } catch (error) {
156 | throw error
157 | }
158 | }
159 |
160 | return {
161 | performVMAction,
162 | deleteVM,
163 | createVM,
164 | }
165 | }
166 |
--------------------------------------------------------------------------------
/web/hooks/use-mobile.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(undefined)
7 |
8 | React.useEffect(() => {
9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 | const onChange = () => {
11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 | }
13 | mql.addEventListener("change", onChange)
14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 | return () => mql.removeEventListener("change", onChange)
16 | }, [])
17 |
18 | return !!isMobile
19 | }
20 |
--------------------------------------------------------------------------------
/web/hooks/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react"
5 |
6 | import type {
7 | ToastActionElement,
8 | ToastProps,
9 | } from "@/components/ui/toast"
10 |
11 | const TOAST_LIMIT = 1
12 | const TOAST_REMOVE_DELAY = 1000000
13 |
14 | type ToasterToast = ToastProps & {
15 | id: string
16 | title?: React.ReactNode
17 | description?: React.ReactNode
18 | action?: ToastActionElement
19 | }
20 |
21 | const actionTypes = {
22 | ADD_TOAST: "ADD_TOAST",
23 | UPDATE_TOAST: "UPDATE_TOAST",
24 | DISMISS_TOAST: "DISMISS_TOAST",
25 | REMOVE_TOAST: "REMOVE_TOAST",
26 | } as const
27 |
28 | let count = 0
29 |
30 | function genId() {
31 | count = (count + 1) % Number.MAX_SAFE_INTEGER
32 | return count.toString()
33 | }
34 |
35 | type ActionType = typeof actionTypes
36 |
37 | type Action =
38 | | {
39 | type: ActionType["ADD_TOAST"]
40 | toast: ToasterToast
41 | }
42 | | {
43 | type: ActionType["UPDATE_TOAST"]
44 | toast: Partial
45 | }
46 | | {
47 | type: ActionType["DISMISS_TOAST"]
48 | toastId?: ToasterToast["id"]
49 | }
50 | | {
51 | type: ActionType["REMOVE_TOAST"]
52 | toastId?: ToasterToast["id"]
53 | }
54 |
55 | interface State {
56 | toasts: ToasterToast[]
57 | }
58 |
59 | const toastTimeouts = new Map>()
60 |
61 | const addToRemoveQueue = (toastId: string) => {
62 | if (toastTimeouts.has(toastId)) {
63 | return
64 | }
65 |
66 | const timeout = setTimeout(() => {
67 | toastTimeouts.delete(toastId)
68 | dispatch({
69 | type: "REMOVE_TOAST",
70 | toastId: toastId,
71 | })
72 | }, TOAST_REMOVE_DELAY)
73 |
74 | toastTimeouts.set(toastId, timeout)
75 | }
76 |
77 | export const reducer = (state: State, action: Action): State => {
78 | switch (action.type) {
79 | case "ADD_TOAST":
80 | return {
81 | ...state,
82 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
83 | }
84 |
85 | case "UPDATE_TOAST":
86 | return {
87 | ...state,
88 | toasts: state.toasts.map((t) =>
89 | t.id === action.toast.id ? { ...t, ...action.toast } : t
90 | ),
91 | }
92 |
93 | case "DISMISS_TOAST": {
94 | const { toastId } = action
95 |
96 | // ! Side effects ! - This could be extracted into a dismissToast() action,
97 | // but I'll keep it here for simplicity
98 | if (toastId) {
99 | addToRemoveQueue(toastId)
100 | } else {
101 | state.toasts.forEach((toast) => {
102 | addToRemoveQueue(toast.id)
103 | })
104 | }
105 |
106 | return {
107 | ...state,
108 | toasts: state.toasts.map((t) =>
109 | t.id === toastId || toastId === undefined
110 | ? {
111 | ...t,
112 | open: false,
113 | }
114 | : t
115 | ),
116 | }
117 | }
118 | case "REMOVE_TOAST":
119 | if (action.toastId === undefined) {
120 | return {
121 | ...state,
122 | toasts: [],
123 | }
124 | }
125 | return {
126 | ...state,
127 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 | }
129 | }
130 | }
131 |
132 | const listeners: Array<(state: State) => void> = []
133 |
134 | let memoryState: State = { toasts: [] }
135 |
136 | function dispatch(action: Action) {
137 | memoryState = reducer(memoryState, action)
138 | listeners.forEach((listener) => {
139 | listener(memoryState)
140 | })
141 | }
142 |
143 | type Toast = Omit
144 |
145 | function toast({ ...props }: Toast) {
146 | const id = genId()
147 |
148 | const update = (props: ToasterToast) =>
149 | dispatch({
150 | type: "UPDATE_TOAST",
151 | toast: { ...props, id },
152 | })
153 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 |
155 | dispatch({
156 | type: "ADD_TOAST",
157 | toast: {
158 | ...props,
159 | id,
160 | open: true,
161 | onOpenChange: (open) => {
162 | if (!open) dismiss()
163 | },
164 | },
165 | })
166 |
167 | return {
168 | id: id,
169 | dismiss,
170 | update,
171 | }
172 | }
173 |
174 | function useToast() {
175 | const [state, setState] = React.useState(memoryState)
176 |
177 | React.useEffect(() => {
178 | listeners.push(setState)
179 | return () => {
180 | const index = listeners.indexOf(setState)
181 | if (index > -1) {
182 | listeners.splice(index, 1)
183 | }
184 | }
185 | }, [state])
186 |
187 | return {
188 | ...state,
189 | toast,
190 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 | }
192 | }
193 |
194 | export { useToast, toast }
195 |
--------------------------------------------------------------------------------
/web/lib/navigation.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Static-safe navigation utilities for embedded Flint
3 | * Replaces Next.js router with reliable static site navigation
4 | */
5 |
6 | export interface NavigationOptions {
7 | replace?: boolean
8 | preserveHash?: boolean
9 | }
10 |
11 | /**
12 | * Static-safe navigation function
13 | * Works reliably in embedded static sites
14 | */
15 | export function navigateTo(path: string, options: NavigationOptions = {}) {
16 | if (typeof window === 'undefined') return
17 |
18 | const { replace = false, preserveHash = false } = options
19 |
20 | // Handle hash-based navigation for same-page routing
21 | if (path.startsWith('#')) {
22 | window.location.hash = path
23 | return
24 | }
25 |
26 | // Construct full URL for static site
27 | const currentHash = preserveHash ? window.location.hash : ''
28 |
29 | // For static sites, append .html if not root and doesn't already have extension
30 | let staticPath = path
31 | if (path !== '/' && !path.includes('.')) {
32 | // Split path and query/hash
33 | const [basePath, ...rest] = path.split(/[?#]/)
34 | const queryHash = rest.length > 0 ? path.substring(basePath.length) : ''
35 |
36 | // Add .html to base path only
37 | staticPath = basePath + '.html' + queryHash
38 | }
39 |
40 | const fullPath = staticPath + currentHash
41 |
42 | if (replace) {
43 | window.location.replace(fullPath)
44 | } else {
45 | window.location.href = fullPath
46 | }
47 | }
48 |
49 | /**
50 | * Get current route information
51 | */
52 | export function getCurrentRoute() {
53 | if (typeof window === 'undefined') return { pathname: '/', search: '', hash: '' }
54 |
55 | return {
56 | pathname: window.location.pathname,
57 | search: window.location.search,
58 | hash: window.location.hash
59 | }
60 | }
61 |
62 | /**
63 | * Get URL parameters in static-safe way
64 | */
65 | export function getUrlParams(): URLSearchParams {
66 | if (typeof window === 'undefined') return new URLSearchParams()
67 | return new URLSearchParams(window.location.search)
68 | }
69 |
70 | /**
71 | * Update URL without navigation (for state management)
72 | */
73 | export function updateUrl(path: string, replace = true) {
74 | if (typeof window === 'undefined') return
75 |
76 | if (replace) {
77 | window.history.replaceState(null, '', path)
78 | } else {
79 | window.history.pushState(null, '', path)
80 | }
81 | }
82 |
83 | /**
84 | * Refresh current page
85 | */
86 | export function refreshPage() {
87 | if (typeof window === 'undefined') return
88 | window.location.reload()
89 | }
90 |
91 | /**
92 | * Go back in history
93 | */
94 | export function goBack() {
95 | if (typeof window === 'undefined') return
96 |
97 | // Check if there's history to go back to
98 | if (window.history.length > 1) {
99 | window.history.back()
100 | } else {
101 | // Fallback to home page
102 | navigateTo('/')
103 | }
104 | }
105 |
106 | /**
107 | * Common navigation paths for Flint
108 | */
109 | export const routes = {
110 | home: '/',
111 | vms: '/vms',
112 | vmDetail: (id: string) => `/vms/detail?id=${id}`,
113 | vmCreate: '/vms/create',
114 | vmConsole: (id: string) => `/vms/console?id=${id}`,
115 | images: '/images',
116 | imagesRepository: '/images#repository',
117 | storage: '/storage',
118 | networking: '/networking',
119 | analytics: '/analytics',
120 | settings: '/settings'
121 | } as const
--------------------------------------------------------------------------------
/web/lib/static-safe-hooks.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Static-Safe React Hooks for Flint
3 | * Ensures reliable behavior in embedded static context
4 | */
5 |
6 | import { useState, useEffect, useCallback, useRef } from 'react'
7 |
8 | /**
9 | * Static-safe state hook that prevents hydration mismatches
10 | */
11 | export function useStaticSafeState(initialValue: T) {
12 | const [value, setValue] = useState(initialValue)
13 | const [isClient, setIsClient] = useState(false)
14 |
15 | useEffect(() => {
16 | setIsClient(true)
17 | }, [])
18 |
19 | return [isClient ? value : initialValue, setValue, isClient] as const
20 | }
21 |
22 | /**
23 | * Static-safe local storage hook
24 | */
25 | export function useStaticSafeLocalStorage(key: string, defaultValue: T) {
26 | const [value, setValue] = useState(defaultValue)
27 | const [isClient, setIsClient] = useState(false)
28 |
29 | useEffect(() => {
30 | setIsClient(true)
31 | if (typeof window !== 'undefined') {
32 | try {
33 | const stored = localStorage.getItem(key)
34 | if (stored) {
35 | setValue(JSON.parse(stored))
36 | }
37 | } catch (error) {
38 | console.warn(`Failed to load ${key} from localStorage:`, error)
39 | }
40 | }
41 | }, [key])
42 |
43 | const setStoredValue = useCallback((newValue: T | ((prev: T) => T)) => {
44 | setValue(prev => {
45 | const valueToStore = typeof newValue === 'function' ? (newValue as (prev: T) => T)(prev) : newValue
46 |
47 | if (typeof window !== 'undefined') {
48 | try {
49 | localStorage.setItem(key, JSON.stringify(valueToStore))
50 | } catch (error) {
51 | console.warn(`Failed to save ${key} to localStorage:`, error)
52 | }
53 | }
54 |
55 | return valueToStore
56 | })
57 | }, [key])
58 |
59 | return [isClient ? value : defaultValue, setStoredValue, isClient] as const
60 | }
61 |
62 | /**
63 | * Static-safe interval hook
64 | */
65 | export function useStaticSafeInterval(callback: () => void, delay: number | null) {
66 | const savedCallback = useRef(callback)
67 | const [isClient, setIsClient] = useState(false)
68 |
69 | useEffect(() => {
70 | setIsClient(true)
71 | }, [])
72 |
73 | useEffect(() => {
74 | savedCallback.current = callback
75 | }, [callback])
76 |
77 | useEffect(() => {
78 | if (!isClient || delay === null) return
79 |
80 | const tick = () => savedCallback.current()
81 | const id = setInterval(tick, delay)
82 | return () => clearInterval(id)
83 | }, [delay, isClient])
84 | }
85 |
86 | /**
87 | * Static-safe media query hook
88 | */
89 | export function useStaticSafeMediaQuery(query: string) {
90 | const [matches, setMatches] = useState(false)
91 | const [isClient, setIsClient] = useState(false)
92 |
93 | useEffect(() => {
94 | setIsClient(true)
95 | if (typeof window !== 'undefined') {
96 | const mediaQuery = window.matchMedia(query)
97 | setMatches(mediaQuery.matches)
98 |
99 | const handler = (event: MediaQueryListEvent) => setMatches(event.matches)
100 | mediaQuery.addEventListener('change', handler)
101 | return () => mediaQuery.removeEventListener('change', handler)
102 | }
103 | }, [query])
104 |
105 | return [isClient ? matches : false, isClient] as const
106 | }
107 |
108 | /**
109 | * Static-safe window size hook
110 | */
111 | export function useStaticSafeWindowSize() {
112 | const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
113 | const [isClient, setIsClient] = useState(false)
114 |
115 | useEffect(() => {
116 | setIsClient(true)
117 | if (typeof window !== 'undefined') {
118 | const handleResize = () => {
119 | setWindowSize({
120 | width: window.innerWidth,
121 | height: window.innerHeight,
122 | })
123 | }
124 |
125 | handleResize()
126 | window.addEventListener('resize', handleResize)
127 | return () => window.removeEventListener('resize', handleResize)
128 | }
129 | }, [])
130 |
131 | return [isClient ? windowSize : { width: 1024, height: 768 }, isClient] as const
132 | }
--------------------------------------------------------------------------------
/web/lib/ui-constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * UI/UX Constants for consistent design across Flint
3 | * Ensures bulletproof static site experience
4 | */
5 |
6 | // Animation and transition constants
7 | export const TRANSITIONS = {
8 | fast: 'transition-all duration-150 ease-out',
9 | normal: 'transition-all duration-200 ease-out',
10 | slow: 'transition-all duration-300 ease-out',
11 | hover: 'hover:scale-[1.02] active:scale-[0.98]',
12 | fadeIn: 'animate-in fade-in duration-200',
13 | slideUp: 'animate-in slide-in-from-bottom-4 duration-300',
14 | } as const
15 |
16 | // Consistent spacing
17 | export const SPACING = {
18 | page: 'p-6 sm:p-8 lg:p-10',
19 | section: 'space-y-6',
20 | card: 'p-6',
21 | cardCompact: 'p-4',
22 | grid: 'gap-6',
23 | gridCompact: 'gap-4',
24 | } as const
25 |
26 | // Color scheme for consistent theming
27 | export const COLORS = {
28 | status: {
29 | success: 'text-green-600 bg-green-50 border-green-200',
30 | warning: 'text-yellow-600 bg-yellow-50 border-yellow-200',
31 | error: 'text-red-600 bg-red-50 border-red-200',
32 | info: 'text-blue-600 bg-blue-50 border-blue-200',
33 | },
34 | vm: {
35 | running: 'text-green-600',
36 | stopped: 'text-red-600',
37 | paused: 'text-yellow-600',
38 | unknown: 'text-gray-600',
39 | },
40 | metrics: {
41 | cpu: 'bg-blue-500',
42 | memory: 'bg-green-500',
43 | storage: 'bg-purple-500',
44 | network: 'bg-orange-500',
45 | }
46 | } as const
47 |
48 | // Typography scale
49 | export const TYPOGRAPHY = {
50 | pageTitle: 'text-3xl font-bold tracking-tight',
51 | sectionTitle: 'text-2xl font-bold tracking-tight',
52 | cardTitle: 'text-lg font-semibold',
53 | label: 'text-sm font-medium',
54 | body: 'text-sm',
55 | caption: 'text-xs text-muted-foreground',
56 | } as const
57 |
58 | // Component sizes
59 | export const SIZES = {
60 | button: {
61 | sm: 'h-8 px-3 text-xs',
62 | md: 'h-10 px-4 text-sm',
63 | lg: 'h-11 px-8 text-base',
64 | },
65 | input: {
66 | sm: 'h-8 text-xs',
67 | md: 'h-10 text-sm',
68 | lg: 'h-11 text-base',
69 | },
70 | card: {
71 | sm: 'min-h-[120px]',
72 | md: 'min-h-[160px]',
73 | lg: 'min-h-[200px]',
74 | }
75 | } as const
76 |
77 | // Consistent shadows and borders
78 | export const EFFECTS = {
79 | shadow: {
80 | sm: 'shadow-sm hover:shadow-md',
81 | md: 'shadow-md hover:shadow-lg',
82 | lg: 'shadow-lg hover:shadow-xl',
83 | },
84 | border: {
85 | light: 'border border-border/50',
86 | normal: 'border border-border',
87 | heavy: 'border-2 border-border',
88 | },
89 | rounded: {
90 | sm: 'rounded-md',
91 | md: 'rounded-lg',
92 | lg: 'rounded-xl',
93 | }
94 | } as const
95 |
96 | // Loading states
97 | export const LOADING = {
98 | spinner: 'animate-spin',
99 | pulse: 'animate-pulse',
100 | bounce: 'animate-bounce',
101 | skeleton: 'bg-muted animate-pulse rounded',
102 | } as const
103 |
104 | // Responsive breakpoints (for consistent responsive design)
105 | export const BREAKPOINTS = {
106 | sm: 'sm:',
107 | md: 'md:',
108 | lg: 'lg:',
109 | xl: 'xl:',
110 | '2xl': '2xl:',
111 | } as const
112 |
113 | // Grid layouts
114 | export const GRIDS = {
115 | auto: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
116 | autoLarge: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
117 | twoCol: 'grid grid-cols-1 lg:grid-cols-2',
118 | threeCol: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
119 | fourCol: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
120 | } as const
--------------------------------------------------------------------------------
/web/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/web/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | output: "export",
4 | eslint: {
5 | ignoreDuringBuilds: true,
6 | },
7 | };
8 |
9 | export default nextConfig;
10 |
--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flint",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "build": "next build",
7 | "dev": "next dev",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@hookform/resolvers": "^3.10.0",
12 | "@radix-ui/react-accordion": "1.2.2",
13 | "@radix-ui/react-alert-dialog": "1.1.4",
14 | "@radix-ui/react-aspect-ratio": "1.1.1",
15 | "@radix-ui/react-avatar": "1.1.2",
16 | "@radix-ui/react-checkbox": "1.1.3",
17 | "@radix-ui/react-collapsible": "1.1.2",
18 | "@radix-ui/react-context-menu": "2.2.4",
19 | "@radix-ui/react-dialog": "1.1.4",
20 | "@radix-ui/react-dropdown-menu": "2.1.4",
21 | "@radix-ui/react-hover-card": "1.1.4",
22 | "@radix-ui/react-label": "2.1.1",
23 | "@radix-ui/react-menubar": "1.1.4",
24 | "@radix-ui/react-navigation-menu": "1.2.3",
25 | "@radix-ui/react-popover": "1.1.4",
26 | "@radix-ui/react-progress": "1.1.1",
27 | "@radix-ui/react-radio-group": "1.2.2",
28 | "@radix-ui/react-scroll-area": "1.2.2",
29 | "@radix-ui/react-select": "2.1.4",
30 | "@radix-ui/react-separator": "1.1.1",
31 | "@radix-ui/react-slider": "1.2.2",
32 | "@radix-ui/react-slot": "1.1.1",
33 | "@radix-ui/react-switch": "1.1.2",
34 | "@radix-ui/react-tabs": "1.1.2",
35 | "@radix-ui/react-toast": "1.2.4",
36 | "@radix-ui/react-toggle": "1.1.1",
37 | "@radix-ui/react-toggle-group": "1.1.1",
38 | "@radix-ui/react-tooltip": "1.1.6",
39 | "@xterm/addon-fit": "^0.10.0",
40 | "@xterm/xterm": "^5.5.0",
41 | "class-variance-authority": "^0.7.1",
42 | "clsx": "^2.1.1",
43 | "cmdk": "1.0.4",
44 | "date-fns": "4.1.0",
45 | "embla-carousel-react": "8.5.1",
46 | "geist": "latest",
47 | "input-otp": "1.4.1",
48 | "lucide-react": "^0.454.0",
49 | "next": "^14.2.32",
50 | "next-themes": "latest",
51 | "react": "^18.3.1",
52 | "react-day-picker": "9.8.0",
53 | "react-dom": "^18.3.1",
54 | "react-hook-form": "^7.62.0",
55 | "react-resizable-panels": "^2.1.9",
56 | "recharts": "^2.15.4",
57 | "sonner": "^1.7.4",
58 | "swr": "^2.3.6",
59 | "tailwind-merge": "^2.6.0",
60 | "tailwindcss-animate": "^1.0.7",
61 | "vaul": "^0.9.9",
62 | "zod": "3.25.67"
63 | },
64 | "devDependencies": {
65 | "@types/node": "^22.18.1",
66 | "@types/react": "^18.3.24",
67 | "@types/react-dom": "^18.3.7",
68 | "autoprefixer": "^10.4.21",
69 | "postcss": "^8.5.6",
70 | "tailwindcss": "^3.4.17",
71 | "tw-animate-css": "1.3.3",
72 | "typescript": "^5.9.2"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/web/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 | plugins: {
4 | tailwindcss: {},
5 | autoprefixer: {},
6 | },
7 | }
8 |
9 | export default config
10 |
--------------------------------------------------------------------------------
/web/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/android-chrome-192x192.png
--------------------------------------------------------------------------------
/web/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/android-chrome-512x512.png
--------------------------------------------------------------------------------
/web/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/web/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/favicon-16x16.png
--------------------------------------------------------------------------------
/web/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/favicon-32x32.png
--------------------------------------------------------------------------------
/web/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/volantvm/flint/99c55486bccf2bf01d8c7a9c8c4af57577cbcada/web/public/favicon.ico
--------------------------------------------------------------------------------
/web/public/flint.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"Flint - Premium KVM Virtualization Platform","short_name":"Flint","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--------------------------------------------------------------------------------
/web/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 | @import 'tw-animate-css';
3 |
4 |
5 | :root {
6 | --background: hsl(1 0 0);
7 | --foreground: hsl(0.145 0 0);
8 | --card: hsl(1 0 0);
9 | --card-foreground: hsl(0.145 0 0);
10 | --popover: hsl(1 0 0);
11 | --popover-foreground: hsl(0.145 0 0);
12 | --primary: hsl(0.205 0 0);
13 | --primary-foreground: hsl(0.985 0 0);
14 | --secondary: hsl(0.97 0 0);
15 | --secondary-foreground: hsl(0.205 0 0);
16 | --muted: hsl(0.97 0 0);
17 | --muted-foreground: hsl(0.556 0 0);
18 | --accent: hsl(0.97 0 0);
19 | --accent-foreground: hsl(0.205 0 0);
20 | --destructive: hsl(0.577 0.245 27.325);
21 | --destructive-foreground: hsl(0.577 0.245 27.325);
22 | --border: hsl(0.922 0 0);
23 | --input: hsl(0.922 0 0);
24 | --ring: hsl(0.708 0 0);
25 | --chart-1: hsl(0.646 0.222 41.116);
26 | --chart-2: hsl(0.6 0.118 184.704);
27 | --chart-3: hsl(0.398 0.07 227.392);
28 | --chart-4: hsl(0.828 0.189 84.429);
29 | --chart-5: hsl(0.769 0.188 70.08);
30 | --radius: 0.625rem;
31 | --sidebar: hsl(0.985 0 0);
32 | --sidebar-foreground: hsl(0.145 0 0);
33 | --sidebar-primary: hsl(0.205 0 0);
34 | --sidebar-primary-foreground: hsl(0.985 0 0);
35 | --sidebar-accent: hsl(0.97 0 0);
36 | --sidebar-accent-foreground: hsl(0.205 0 0);
37 | --sidebar-border: hsl(0.922 0 0);
38 | --sidebar-ring: hsl(0.708 0 0);
39 | }
40 |
41 | .dark {
42 | --background: hsl(0.145 0 0);
43 | --foreground: hsl(0.985 0 0);
44 | --card: hsl(0.145 0 0);
45 | --card-foreground: hsl(0.985 0 0);
46 | --popover: hsl(0.145 0 0);
47 | --popover-foreground: hsl(0.985 0 0);
48 | --primary: hsl(0.985 0 0);
49 | --primary-foreground: hsl(0.205 0 0);
50 | --secondary: hsl(0.269 0 0);
51 | --secondary-foreground: hsl(0.985 0 0);
52 | --muted: hsl(0.269 0 0);
53 | --muted-foreground: hsl(0.708 0 0);
54 | --accent: hsl(0.269 0 0);
55 | --accent-foreground: hsl(0.985 0 0);
56 | --destructive: hsl(0.396 0.141 25.723);
57 | --destructive-foreground: hsl(0.637 0.237 25.331);
58 | --border: hsl(0.269 0 0);
59 | --input: hsl(0.269 0 0);
60 | --ring: hsl(0.439 0 0);
61 | --chart-1: hsl(0.488 0.243 264.376);
62 | --chart-2: hsl(0.696 0.17 162.48);
63 | --chart-3: hsl(0.769 0.188 70.08);
64 | --chart-4: hsl(0.627 0.265 303.9);
65 | --chart-5: hsl(0.645 0.246 16.439);
66 | --sidebar: hsl(0.205 0 0);
67 | --sidebar-foreground: hsl(0.985 0 0);
68 | --sidebar-primary: hsl(0.488 0.243 264.376);
69 | --sidebar-primary-foreground: hsl(0.985 0 0);
70 | --sidebar-accent: hsl(0.269 0 0);
71 | --sidebar-accent-foreground: hsl(0.985 0 0);
72 | --sidebar-border: hsl(0.269 0 0);
73 | --sidebar-ring: hsl(0.439 0 0);
74 | }
75 |
76 |
77 | @layer base {
78 | * {
79 | @apply border-border outline-ring/50;
80 | }
81 | body {
82 | @apply bg-background text-foreground;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/web/styles/static-export-fixes.css:
--------------------------------------------------------------------------------
1 | /* Static export specific fixes */
2 | @media screen {
3 | /* Ensure proper viewport handling in static exports */
4 | html, body {
5 | height: 100vh;
6 | overflow: hidden;
7 | }
8 |
9 | /* Fix for static export scroll issues */
10 | #__next {
11 | height: 100vh;
12 | overflow: hidden;
13 | }
14 |
15 | /* Prevent extra space in static exports */
16 | .main-content-wrapper {
17 | max-height: calc(100vh - 3.5rem);
18 | }
19 |
20 | @media (min-width: 640px) {
21 | .main-content-wrapper {
22 | max-height: calc(100vh - 4rem);
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/web/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './components/**/*.{js,ts,jsx,tsx,mdx}',
5 | './app/**/*.{js,ts,jsx,tsx,mdx}',
6 | './lib/**/*.{js,ts,jsx,tsx,mdx}',
7 | './hooks/**/*.{js,ts,jsx,tsx,mdx}',
8 | ],
9 | theme: {
10 | extend: {
11 | colors: {
12 | background: 'hsl(var(--background))',
13 | foreground: 'hsl(var(--foreground))',
14 | card: {
15 | DEFAULT: 'hsl(var(--card))',
16 | foreground: 'hsl(var(--card-foreground))',
17 | },
18 | popover: {
19 | DEFAULT: 'hsl(var(--popover))',
20 | foreground: 'hsl(var(--popover-foreground))',
21 | },
22 | primary: {
23 | DEFAULT: 'hsl(var(--primary))',
24 | foreground: 'hsl(var(--primary-foreground))',
25 | },
26 | secondary: {
27 | DEFAULT: 'hsl(var(--secondary))',
28 | foreground: 'hsl(var(--secondary-foreground))',
29 | },
30 | muted: {
31 | DEFAULT: 'hsl(var(--muted))',
32 | foreground: 'hsl(var(--muted-foreground))',
33 | },
34 | accent: {
35 | DEFAULT: 'hsl(var(--accent))',
36 | foreground: 'hsl(var(--accent-foreground))',
37 | },
38 | destructive: {
39 | DEFAULT: 'hsl(var(--destructive))',
40 | foreground: 'hsl(var(--destructive-foreground))',
41 | },
42 | border: 'hsl(var(--border))',
43 | input: 'hsl(var(--input))',
44 | ring: 'hsl(var(--ring))',
45 | chart: {
46 | '1': 'hsl(var(--chart-1))',
47 | '2': 'hsl(var(--chart-2))',
48 | '3': 'hsl(var(--chart-3))',
49 | '4': 'hsl(var(--chart-4))',
50 | '5': 'hsl(var(--chart-5))',
51 | },
52 | sidebar: {
53 | DEFAULT: 'hsl(var(--sidebar))',
54 | foreground: 'hsl(var(--sidebar-foreground))',
55 | primary: 'hsl(var(--sidebar-primary))',
56 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
57 | accent: 'hsl(var(--sidebar-accent))',
58 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
59 | border: 'hsl(var(--sidebar-border))',
60 | ring: 'hsl(var(--sidebar-ring))',
61 | },
62 | },
63 | borderRadius: {
64 | lg: 'var(--radius)',
65 | md: 'calc(var(--radius) - 2px)',
66 | sm: 'calc(var(--radius) - 4px)',
67 | },
68 | fontFamily: {
69 | sans: ['GeistSans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
70 | mono: ['GeistMono', 'ui-monospace', 'monospace'],
71 | display: ['GeistSans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
72 | },
73 | spacing: {
74 | '18': '4.5rem',
75 | '22': '5.5rem',
76 | '28': '7rem',
77 | '36': '9rem',
78 | '72': '18rem',
79 | '84': '21rem',
80 | '96': '24rem',
81 | },
82 | backdropBlur: {
83 | 'xs': '2px',
84 | },
85 | boxShadow: {
86 | 'glow': '0 0 20px rgba(59, 130, 246, 0.15)',
87 | 'glow-lg': '0 0 40px rgba(59, 130, 246, 0.2)',
88 | 'premium': '0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04)',
89 | 'premium-lg': '0 16px 64px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08)',
90 | },
91 | animation: {
92 | 'spin': 'spin 1s linear infinite',
93 | 'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
94 | },
95 | },
96 | },
97 | plugins: [],
98 | }
99 |
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "target": "ES6",
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "noEmit": true,
13 | "esModuleInterop": true,
14 | "module": "esnext",
15 | "moduleResolution": "bundler",
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "jsx": "preserve",
19 | "incremental": true,
20 | "plugins": [
21 | {
22 | "name": "next"
23 | }
24 | ],
25 | "paths": {
26 | "@/*": [
27 | "./*"
28 | ]
29 | }
30 | },
31 | "include": [
32 | "next-env.d.ts",
33 | "**/*.ts",
34 | "**/*.tsx",
35 | ".next/types/**/*.ts",
36 | "out/types/**/*.ts"
37 | ],
38 | "exclude": [
39 | "node_modules"
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
|