20 |
22 |
44 |
58 | )
59 | }
60 |
61 | function UserButton() {
62 | const { user } = AppState.use('user')
63 | if (!user) return null
64 |
65 | const avatar = avatars[user.avatar]
66 | return (
67 |
45 |
49 |
50 |
52 |
53 | {WINDOW_BUTTONS.map((item) => (
54 |
57 |
79 | 
80 |
82 | {user.name}
81 |
91 |
92 |
93 | 
97 |
98 |
99 | {avatars.map((avatar, index) => (
100 | setUser((prev) => ({ ...prev, avatar: index }))}
104 | >
105 |
106 |
107 | ))}
108 |
109 |
110 |
136 |
137 | )
138 | }
139 |
--------------------------------------------------------------------------------
/src/context/theme.context.tsx:
--------------------------------------------------------------------------------
1 | import { api } from '@/lib/tauri'
2 | import { createContext, useContext, useEffect, useState } from 'react'
3 |
4 | export type Theme = 'dark' | 'light' | 'system'
5 | export type ResolvedTheme = 'dark' | 'light'
6 |
7 | type ThemeProviderProps = {
8 | children: React.ReactNode
9 | defaultTheme?: Theme
10 | storageKey?: string
11 | }
12 |
13 | type ThemeProviderState = {
14 | theme: Theme
15 | resolvedTheme: ResolvedTheme
16 | setTheme: (theme: Theme) => void
17 | }
18 |
19 | const THEME_KEY = 'vite-ui-theme'
20 | const initialState: ThemeProviderState = {
21 | theme: 'system',
22 | resolvedTheme: 'light',
23 | setTheme: () => null,
24 | }
25 |
26 | const ThemeContext = createContext
52 |
54 |
55 | )
56 |
57 | if (!loaded) {
58 | content = (
59 |
60 |
63 | )
64 | }
65 |
66 | return (
67 | <>
68 |
29 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/routes/_pages/-components/queue-container.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { ScrollArea } from '@/components/ui/scroll-area'
3 | import { AnimatePresence } from 'motion/react'
4 |
5 | type QueueContainerProps = Omit<
6 | React.ComponentProps
30 |
51 |
38 | {showPercentage && (
39 |
50 | 40 | {progressPercentage}% 41 |
42 | )} 43 | 44 | {!!speed && ( 45 |46 | {bytesToString(speed * 1000_000)}/s 47 |
48 | )} 49 |
22 | {children}
23 |
24 |
35 | 
36 |
37 | ) : (
38 | getFileIcon(fileType)
39 | )
40 |
41 | return (
42 |
67 |
80 |
68 |
71 | {hasPath && (
72 | revealItemInDir(item.path)}
74 | className='text-muted-foreground cursor-pointer truncate text-[0.6rem] hover:underline'
75 | >
76 | {item.path.replace(/\\/g, '/')}
77 |
78 | )}
79 | {name}
69 | {item.done &&81 | {bytesToString(size)} 82 |
83 | {dropdownContent && ( 84 |
50 |
53 | )
54 | }
55 |
56 | function AnimatedButton({ type }: { type: keyof typeof BUTTONS }) {
57 | const [hovered, setHovered] = useState(false)
58 | const navigate = Route.useNavigate()
59 |
60 | const config = BUTTONS[type]
61 | const Icon = config.icon
62 |
63 | return (
64 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/routes/_pages/onboard.tsx:
--------------------------------------------------------------------------------
1 | import { EditProfile } from '@/context/edit-profile'
2 | import { AppState } from '@/state/appstate'
3 | import { createFileRoute } from '@tanstack/react-router'
4 | import { useEffect } from 'react'
5 |
6 | export const Route = createFileRoute('/_pages/onboard')({
7 | component: RouteComponent,
8 | })
9 |
10 | function RouteComponent() {
11 | const navigate = Route.useNavigate()
12 | const { user } = AppState.use('user')
13 |
14 | useEffect(() => {
15 | if (user) navigate({ to: '/' })
16 | }, [user])
17 | return
60 |
83 | {Object.values(store.downloadQueue).map((item) => (
84 | api.abortDownload(item.name)}
91 | className='cursor-pointer hover:bg-rose-400! dark:hover:bg-rose-600!'
92 | >
93 | Cancel
94 |
95 | )
96 | }
97 | doneLabel='Download complete'
98 | />
99 | ))}
100 |
101 |
102 | )
103 | }
104 |
105 | export function ReceivePageListeners() {
106 | useEffect(() => {
107 | const store = AppState.get()
108 | const throttle = new Throttle(1000)
109 |
110 | const unsub = listeners({
111 | [events.DOWNLOAD_FILE_ADDED]: (ev) => {
112 | const item = ev.payload as events.DownloadFileAdded as DownloadQueueItem
113 | item.progress = motionValue(0)
114 | store.addToDownloadQueue(item)
115 | },
116 |
117 | [events.DOWNLOAD_FILE_PROGRESS]: (ev) => {
118 | let { name, progress, speed } =
119 | ev.payload as events.DownloadFileProgress
120 | if (throttle.isFree(name)) {
121 | store.updateDownloadQueueItemProgress(name, progress, speed)
122 | }
123 | },
124 |
125 | [events.DOWNLOAD_FILE_COMPLETED]: (ev) => {
126 | let { name, path } = ev.payload as events.DownloadFileCompleted
127 | store.updateDownloadQueueItemPath(name, path)
128 | store.updateDownloadQueueItemProgress(name, 100, 0)
129 | },
130 |
131 | [events.DOWNLOAD_ALL_COMPLETE]: () => {
132 | AppState.set({ isDownloading: false })
133 | },
134 |
135 | [events.DOWNLOAD_FILE_ERROR]: (ev) => {
136 | let { name, error } = ev.payload as events.DownloadFileError
137 | store.removeFromDownloadQueue(name)
138 | toast.error(error, {
139 | description: name,
140 | })
141 | },
142 | [events.DOWNLOAD_FILE_ABORTED]: (ev) => {
143 | let { name } = ev.payload as events.DownloadFileAborted
144 | store.removeFromDownloadQueue(name)
145 | toast('Download canceled', {
146 | description: name,
147 | })
148 | },
149 | })
150 | return unsub
151 | }, [])
152 | return <>
153 | }
154 |
--------------------------------------------------------------------------------
/src/routes/_pages/send.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatedCheckMark } from '@/components/animated-checkmark'
2 | import { QueueContainer } from './-components/queue-container'
3 | import { QueueItem } from './-components/queue-item'
4 | import { Button } from '@/components/ui/button'
5 | import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
6 | import { events, api, copyText, listeners } from '@/lib/tauri'
7 | import { sleep, Throttle, ThrottledQueue } from '@/utils'
8 | import { AppState, UploadQueueItem } from '@/state/appstate'
9 | import { createFileRoute } from '@tanstack/react-router'
10 | import { open } from '@tauri-apps/plugin-dialog'
11 | import { Plus, Ticket, Trash, Trash2 } from 'lucide-react'
12 | import { motion, motionValue } from 'motion/react'
13 | import { useEffect, useRef, useState } from 'react'
14 | import { toast } from 'sonner'
15 |
16 | export const Route = createFileRoute('/_pages/send')({
17 | component: SendPage,
18 | })
19 |
20 | function SendPage() {
21 | const scrollAreaRef = useRef
61 |
66 |
81 |
82 |
56 |
68 | {queueSize} files
57 | 64 | 67 |
72 |
81 |
73 | Oops! Looks like it's a bit empty here 🤔
74 |
75 | Add some files or drag and drop to start sharing the magic! ✨
76 |
91 |
93 | )
94 | })}
95 | {Object.values(store.uploadQueue).map((item) => {
96 | return (
97 |