44 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/error-state.tsx:
--------------------------------------------------------------------------------
1 | import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
2 | import { useRef } from 'react'
3 | import { useRouteError } from 'react-router-dom'
4 | import { useDatabase } from 'src/hooks'
5 | import { loc } from 'src/utilities/i18n'
6 |
7 | import { Button } from '.'
8 |
9 | export const ErrorState = () => {
10 | const error = useRouteError()
11 | const sendMessage = useDatabase('error')
12 | const textAreaReference = useRef
45 |
55 |
56 | {loc('empty_title')}
47 |{loc('empty_desc')}
48 |
49 |
53 |
54 |
25 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/full-page-loader.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 |
3 | import { Logo } from './logo'
4 |
5 | export const FullPageLoader = () => {
6 | return (
7 |
26 |
53 |
27 |
52 | {loc('error_title')}
32 |{loc('error_desc')}
33 | 36 | 43 |
44 |
47 |
50 |
51 |
8 |
19 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/help-icon.tsx:
--------------------------------------------------------------------------------
1 | import { QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
2 |
3 | import { Tooltip } from '.'
4 |
5 | type HelpIconProperties = {
6 | content: string
7 | }
8 |
9 | /**
10 | * Displays a help icon with a tooltip on the hover of a group element.
11 | * Must be placed inside a group className to render.
12 | */
13 | export const HelpIcon = ({ content }: HelpIconProperties) => {
14 | return (
15 |
20 |
26 |
21 |
25 | {loc('no_results_title')}
23 |{loc('no_results_desc')}
24 |
7 |
19 |
20 | )
21 | },
22 | )
23 |
--------------------------------------------------------------------------------
/src/components/tabs.tsx:
--------------------------------------------------------------------------------
1 | import { Tab as HeadlessTab } from '@headlessui/react'
2 | import clsx from 'clsx'
3 | import { HTMLAttributes, PropsWithChildren } from 'react'
4 |
5 | const Group = (properties: PropsWithChildren) =>
29 |
65 |
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/src/layout/collection/card/card-actions/card-copy.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { Button } from 'src/components'
3 | import { loc } from 'src/utilities/i18n'
4 |
5 | import { type CardData } from '..'
6 | import { useCardActions } from './use-card-actions'
7 |
8 | export const CardCopy = ({ data }: CardData) => {
9 | const [label, setLabel] = useState(loc('main_copy'))
10 | const { copyOptimized } = useCardActions(data)
11 |
12 | function handleCopy() {
13 | setLabel(loc('export_copied'))
14 | copyOptimized()
15 | setTimeout(() => {
16 | setLabel(loc('main_copy'))
17 | }, 1200)
18 | }
19 |
20 | return (
21 |
22 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/layout/collection/card/card-actions/card-select.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import { useMemo } from 'react'
3 | import { useCollection } from 'src/providers'
4 |
5 | import { CardData } from '..'
6 |
7 | export const CardSelect = ({ data }: CardData) => {
8 | const { dispatch, state } = useCollection()
9 |
10 | const isSelected = useMemo(() => {
11 | return state.selected.some((svg) => svg.id === data.id)
12 | }, [state.selected, data])
13 |
14 | const handleSelect = (event: React.ChangeEvent
33 |
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/layout/collection/card/card-actions/use-card-actions.ts:
--------------------------------------------------------------------------------
1 | import type { StorageSvg, Svg } from 'src/scripts'
2 |
3 | import { nanoid } from 'nanoid'
4 | import { useRevalidator } from 'react-router-dom'
5 | import { useCollection } from 'src/providers'
6 | import { Inline } from 'src/scripts'
7 | import { formUtilities } from 'src/utilities/form-utilities'
8 | import { StorageUtilities } from 'src/utilities/storage-utilities'
9 | import { SvgUtilities } from 'src/utilities/svg-utilities'
10 | import { optimize } from 'svgo'
11 |
12 | export const useCardActions = (data: Svg) => {
13 | const { state } = useCollection()
14 | const { revalidate } = useRevalidator()
15 |
16 | async function duplicateItem() {
17 | const storageSvgDuplicate: StorageSvg = {
18 | corsRestricted: data.corsRestricted,
19 | id: nanoid(),
20 | lastEdited: new Date().toISOString(),
21 | name: data.name,
22 | svg: data.svg,
23 | }
24 | const newData = [new Inline(storageSvgDuplicate), ...state.data]
25 | const pageData = await StorageUtilities.getPageData(state.collectionId)
26 | StorageUtilities.setPageData(state.collectionId, {
27 | ...pageData,
28 | data: SvgUtilities.createStorageSvgs(newData),
29 | })
30 | revalidate()
31 | }
32 |
33 | async function deleteItem() {
34 | const filteredData = state.data.filter((item) => item.id !== data.id)
35 | const pageData = await StorageUtilities.getPageData(state.collectionId)
36 | StorageUtilities.setPageData(state.collectionId, {
37 | ...pageData,
38 | data: SvgUtilities.createStorageSvgs(filteredData),
39 | })
40 | revalidate()
41 | }
42 |
43 | function copyOriginal() {
44 | formUtilities.copyStringToClipboard(data.svg)
45 | }
46 |
47 | async function copyOptimized() {
48 | const optimizedString = optimize(data.svg)
49 | formUtilities.copyStringToClipboard(optimizedString.data)
50 | }
51 |
52 | async function downloadOriginal() {
53 | const pageData = await StorageUtilities.getPageData(state.collectionId)
54 | formUtilities.downloadSvgString(data.svg, pageData.host)
55 | }
56 |
57 | return {
58 | copyOptimized,
59 | copyOriginal,
60 | deleteItem,
61 | downloadOriginal,
62 | duplicateItem,
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/layout/collection/card/card-content.tsx:
--------------------------------------------------------------------------------
1 | import type { Image } from 'src/scripts'
2 |
3 | import clsx from 'clsx'
4 |
5 | import { type CardData } from '.'
6 |
7 | export const CardContent = ({ data }: CardData) => {
8 | if (data.corsRestricted) {
9 | return (
10 |
21 |
22 |
23 |
24 |
25 |
26 | {/* Open in new tab button */}
27 |
28 |
37 |
38 | {children}
39 |
38 |
40 |
47 |
48 | )
49 | })
50 |
--------------------------------------------------------------------------------
/src/layout/collection/card/svg-name.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 | import { useCollection } from 'src/providers'
3 | import { StorageUtilities } from 'src/utilities/storage-utilities'
4 |
5 | import { CardData } from '.'
6 |
7 | export const SvgName = ({ data }: CardData) => {
8 | const { dispatch, state } = useCollection()
9 |
10 | const handleChange = async (event: React.FormEvent
44 |
46 |
34 |
69 | )
70 | }
71 |
--------------------------------------------------------------------------------
/src/layout/collection/index.tsx:
--------------------------------------------------------------------------------
1 | import type { CollectionData } from 'src/types'
2 |
3 | import { Transition } from '@headlessui/react'
4 | import { useEffect } from 'react'
5 | import { FeedbackModal, ReviewPrompt } from 'src/components'
6 | import { NoResults } from 'src/components/no-results'
7 | import { useCollection } from 'src/providers'
8 | import { SvgType } from 'src/scripts'
9 |
10 | import { Card } from './card'
11 | import { SvgName } from './card/svg-name'
12 | import { CollectionDropZone } from './collection-drop-zone'
13 | import { InfiniteScroll } from './infinite-scroll'
14 | import { ShowPasteCue } from './show-paste-cue'
15 |
16 | export const Collection = ({ data }: Pick
40 |
66 |
67 | {children}
68 |
48 |
65 |
53 |
54 |
64 |
55 |
62 | 56 | 57 | {loc('drop_files')} 58 | {' '} 59 | {loc('to_upload')} 60 |
61 |{loc('upload_file_limit')}
63 |-
60 | {state.processedData.map((svg, index) => (
61 |
36 |
39 |
46 |
47 |
22 |
23 |
27 |
18 | {loc('main_showing')} {state.processedData.length}{' '}
19 | {loc('main_of')} {filteredResultLength}{' '}
20 | {loc('main_results')}
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/layout/collection/main-bar/search.tsx:
--------------------------------------------------------------------------------
1 | import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline'
2 | import clsx from 'clsx'
3 | import { useState } from 'react'
4 | import { IconButton } from 'src/components'
5 | import { useCollection } from 'src/providers'
6 |
7 | export const Search = () => {
8 | const { dispatch, state } = useCollection()
9 | const [active, setActive] = useState(false)
10 |
11 | function onInputFocus() {
12 | setActive(true)
13 | }
14 |
15 | function onSearchInputBlur() {
16 | if (state.search.length > 0) return
17 | setActive(false)
18 | }
19 |
20 | function onSearchInputChange(event: React.ChangeEvent
38 |
58 |
60 | )}
61 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/layout/collection/main-bar/selected-quantity.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { useCollection } from 'src/providers'
3 | import { loc } from 'src/utilities/i18n'
4 |
5 | export const SelectedQuantity = () => {
6 | const { state } = useCollection()
7 |
8 | const filteredResultLength = useMemo(() => {
9 | if (state.view.filters['hide-cors']) {
10 | return state.data.filter((svg) => !svg.corsRestricted).length
11 | }
12 |
13 | return state.data.length
14 | }, [state.data, state.view.filters])
15 |
16 | return (
17 |
18 | {state.selected.length} {loc('main_of')}{' '}
19 | {filteredResultLength} {loc('selected')}
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/layout/collection/main-bar/selection-control.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 | import { Fragment, useEffect, useRef } from 'react'
3 | import { useCollection } from 'src/providers'
4 | import { loc } from 'src/utilities/i18n'
5 |
6 | export const SelectionControl = () => {
7 | const { dispatch: collectionDispatch, state: collectionState } = useCollection()
8 | const checkboxReference = useRef
39 |
47 |
50 |
51 |
32 |
71 | )
72 | })
73 |
--------------------------------------------------------------------------------
/src/layout/collection/main-panel/index.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from '@headlessui/react'
2 | import clsx from 'clsx'
3 | import { Tabs } from 'src/components'
4 | import { useCollection } from 'src/providers'
5 | import { loc } from 'src/utilities/i18n'
6 |
7 | import { EditPanel } from './edit-panel'
8 | import { ExportFooter } from './export-footer'
9 | import { ExportPanel } from './export-panel'
10 |
11 | export const MainPanel = () => {
12 | const { state: collectionState } = useCollection()
13 |
14 | return (
15 |
33 |
36 |
48 |
49 |
50 |
52 | {loc('export_settings')}
53 |
54 |
55 |
57 |
58 |
60 |
61 |
63 |
64 |
66 |
67 |
69 |
70 |
20 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/layout/collection/main-panel/png-settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { HelpIcon } from 'src/components'
2 | import { useExport } from 'src/providers'
3 | import { loc } from 'src/utilities/i18n'
4 |
5 | import { imageTooltip } from '../webp-settings'
6 |
7 | export const PngSettings = () => {
8 | const { dispatch, state } = useExport()
9 |
10 | const handleSizeChange = (event: React.ChangeEvent
21 |
35 |
22 |
25 |
27 |
34 |
36 |
39 |
49 |
50 |
16 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/layout/collection/main-panel/sprite-settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { HelpIcon } from 'src/components'
2 | import { useExport } from 'src/providers'
3 | import { loc } from 'src/utilities/i18n'
4 |
5 | export const SpriteSettings = () => {
6 | const { dispatch, state } = useExport()
7 |
8 | function handlePrefixChange(event: React.ChangeEvent
17 |
31 |
18 |
21 |
23 |
30 |
20 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/layout/collection/main-panel/svg-settings/svgo-option.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { HelpIcon } from 'src/components'
3 | import { SvgoPlugin } from 'src/constants/svgo-plugins'
4 | import { useExport } from 'src/providers'
5 |
6 | type SvgoOptionProperties = {
7 | plugin: SvgoPlugin
8 | }
9 |
10 | export const SvgoOption = ({ plugin }: SvgoOptionProperties) => {
11 | const { dispatch, state } = useExport()
12 |
13 | const isChecked = useMemo(() => {
14 | return state.settings.svg.svgoPlugins.some((p) => p.name === plugin.name)
15 | }, [state.settings.svg.svgoPlugins, plugin])
16 |
17 | const handleOptionChange = (event: React.ChangeEvent
21 |
22 |
25 |
40 |
36 | {useExample}
37 |
38 | )}
39 |
41 |
42 |
45 |
60 |
56 | {useExample}
57 |
58 | )}
59 |
33 |
40 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/layout/collection/main-panel/webp-settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { HelpIcon } from 'src/components'
2 | import { useExport } from 'src/providers'
3 | import { loc } from 'src/utilities/i18n'
4 |
5 | export const imageTooltip =
6 | 'Applied to the largest side (height or width) of the image while scaling proportionally.'
7 |
8 | export const WebPSettings = () => {
9 | const { dispatch, state } = useExport()
10 |
11 | const handleSizeChange = (event: React.ChangeEvent
41 |
44 |
45 |
21 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/layout/collection/show-paste-cue.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { Toast } from 'src/components'
3 | import { type UserState, useUser } from 'src/providers'
4 | import { loc } from 'src/utilities/i18n'
5 | import { StorageUtilities } from 'src/utilities/storage-utilities'
6 |
7 | /**
8 | * A toast that educates the user about the ability to paste SVGs into the app.
9 | */
10 | export const ShowPasteCue = () => {
11 | const [show, setShow] = useState(false)
12 | const { dispatch: userDispatch, state: userState } = useUser()
13 |
14 | useEffect(() => {
15 | if (userState.onboarding.hasPastedSvg && !userState.onboarding.viewedSvgInClipboard) {
16 | setShow(true)
17 | } else {
18 | setShow(false)
19 | }
20 | }, [userState.onboarding.hasPastedSvg, userState.onboarding.viewedSvgInClipboard])
21 |
22 | const setReviewPromptViewed = () => {
23 | const payload: UserState = {
24 | ...userState,
25 | onboarding: { ...userState.onboarding, viewedSvgInClipboard: true },
26 | }
27 | StorageUtilities.setStorageData('user', payload)
28 | userDispatch({ payload, type: 'set-user' })
29 | setShow(false)
30 | }
31 |
32 | return (
33 |
22 |
36 |
23 |
26 |
28 |
35 |
37 |
40 |
50 |
51 |
6 |
15 | )
16 |
--------------------------------------------------------------------------------
/src/layout/details/editor/action-bar.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowRightIcon, BoltIcon, SparklesIcon } from '@heroicons/react/24/outline'
2 | import { useMemo } from 'react'
3 | import { useDetails } from 'src/providers'
4 | import { loc } from 'src/utilities/i18n'
5 | import { SvgUtilities } from 'src/utilities/svg-utilities'
6 |
7 | import { useOptimize } from '../use-optimize'
8 |
9 | export const ActionBar = () => {
10 | const { dispatch, state } = useDetails()
11 | const { format, optimize } = useOptimize()
12 |
13 | const onOptimize = () => {
14 | dispatch({ payload: optimize(state.currentString), type: 'update-current-string' })
15 | }
16 |
17 | const onFormat = () => {
18 | const formatted = format(state.currentString)
19 | dispatch({ payload: formatted, type: 'update-current-string' })
20 | }
21 |
22 | const bytes = useMemo(() => {
23 | return {
24 | after: SvgUtilities.getPrettyBytes(state.currentString),
25 | before: SvgUtilities.getPrettyBytes(state.originalString),
26 | }
27 | }, [state.currentString, state.originalString])
28 |
29 | return (
30 |
7 | {Array.from({ length: 20 }).map((_, index) => (
8 |
12 | ))}
13 |
14 |
31 |
35 |
36 | {bytes.before}
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/layout/details/editor/editor-onboarding.tsx:
--------------------------------------------------------------------------------
1 | import * as Tooltip from '@radix-ui/react-tooltip'
2 | import clsx from 'clsx'
3 | import { PropsWithChildren } from 'react'
4 | import { useUser } from 'src/providers'
5 | import { loc } from 'src/utilities/i18n'
6 |
7 | export const EditorOnboarding = ({ children }: PropsWithChildren) => {
8 | const { state } = useUser()
9 |
10 | if (state.onboarding.viewedEditSvg) {
11 | return children
12 | }
13 |
14 | return (
15 |
29 |
36 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/layout/details/export-sidebar/use-export-resize.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from 'react'
2 |
3 | export const useExportResize = () => {
4 | const [width, setWidth] = useState(320)
5 | const reference = useRef
37 |
40 |
41 |
25 |
27 |
31 |
32 | )
33 | })
34 |
--------------------------------------------------------------------------------
/src/layout/details/preview-sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs } from 'src/components'
2 | import { loc } from 'src/utilities/i18n'
3 |
4 | import { DataURI } from './preview-data-uri'
5 | import { PreviewReact } from './preview-react'
6 | import { PreviewSvg } from './preview-svg'
7 | import { usePreviewResize } from './use-preview-resize'
8 |
9 | export const PreviewSidebar = () => {
10 | const { ref, width } = usePreviewResize()
11 |
12 | return (
13 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/layout/details/preview-sidebar/preview-data-uri.tsx:
--------------------------------------------------------------------------------
1 | import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'
2 | import miniUri from 'mini-svg-data-uri'
3 | import { useMemo } from 'react'
4 | import { Button } from 'src/components'
5 | import { useClipboard } from 'src/hooks'
6 | import { useDetails } from 'src/providers'
7 | import { SvgUtilities } from 'src/utilities/svg-utilities'
8 |
9 | export const DataURI = () => {
10 | const { copyToClipboard, text } = useClipboard()
11 | const { state } = useDetails()
12 |
13 | const uriData = useMemo(() => {
14 | return [
15 | {
16 | name: 'Minifed Data URI',
17 | value: miniUri(state.currentString),
18 | },
19 | {
20 | name: 'base64',
21 | value: 'data:image/svg+xml;base64,' + btoa(state.currentString),
22 | },
23 | {
24 | name: 'encodeURIComponent',
25 | value: 'data:image/svg+xml,' + encodeURIComponent(state.currentString),
26 | },
27 | ]
28 | }, [state.currentString])
29 |
30 | return (
31 |
32 | {uriData.map((item) => (
33 |
34 |
35 | {item.name} -{' '}
36 | {SvgUtilities.getPrettyBytes(item.value)}
37 |
38 |
52 | ))}
53 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/src/layout/details/preview-sidebar/preview-svg/index.tsx:
--------------------------------------------------------------------------------
1 | import Draggable from 'react-draggable'
2 | import { useDetails } from 'src/providers'
3 |
4 | import { PreviewSvgFooter } from './preview-svg-footer'
5 |
6 | export const PreviewSvg = () => {
7 | const { state } = useDetails()
8 |
9 | const { background, scale } = state.preview.svg
10 |
11 | return (
12 | <>
13 |
14 |
39 |
47 |
51 |
48 |
50 | {item.value}
49 |
15 |
25 |
16 |
17 |
22 |
23 |
24 |
24 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/src/layout/details/preview-sidebar/use-preview-resize.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from 'react'
2 |
3 | export const usePreviewResize = () => {
4 | const [width, setWidth] = useState(400)
5 | const reference = useRef
25 |
26 |
27 |
28 |
30 |
31 | {scalePercentage}%
32 |
33 |
34 |
36 |
37 |
38 |
39 |
44 |
45 |
10 |
16 | )
17 |
--------------------------------------------------------------------------------
/src/layout/settings/export-settings.tsx:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import { useEffect, useState } from 'react'
3 | import { SvgoPlugin, svgoPlugins } from 'src/constants/svgo-plugins'
4 | import { loc } from 'src/utilities/i18n'
5 | import { StorageUtilities } from 'src/utilities/storage-utilities'
6 |
7 | import { Category } from './category'
8 | import { Item } from './item'
9 |
10 | export const ExportSettings = () => {
11 | const [storagePlugins, setStoragePlugins] = useState
11 |
14 | {children}
15 | {title}
12 |{description}
13 |
50 |
57 |
64 | ))}
65 |
58 |
61 | {plugin.description}
62 |
63 | {loc('settings_settings')}
27 |{children}
5 | } 6 | 7 | const Description = ({ children }: PropsWithChildren) => { 8 | return{children}
9 | } 10 | 11 | const Setting = ({ children }: PropsWithChildren) => { 12 | return{children}
13 | }
14 |
15 | export const Section = ({ children }: PropsWithChildren) => {
16 | return {children}
17 | }
18 |
19 | export const Item = ({ children }: PropsWithChildren) => {
20 | return {children}
21 | }
22 |
23 | Item.Heading = Heading
24 | Item.Description = Description
25 | Item.Section = Section
26 | Item.Setting = Setting
27 |
--------------------------------------------------------------------------------
/src/layout/settings/keyboard-shortcut.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | export const KeyboardShortcut = () => {
4 | const [shortcut, setShortcut] = useState('')
5 |
6 | useEffect(() => {
7 | const getKeyboardShortcut = async () => {
8 | const commands = await chrome.commands.getAll()
9 | const executeCommand = commands.find((command) => command.name === '_execute_action')
10 | setShortcut(executeCommand?.shortcut ?? '')
11 | }
12 |
13 | getKeyboardShortcut()
14 | }, [])
15 |
16 | if (!shortcut) {
17 | return not set
18 | }
19 |
20 | return (
21 |
22 | {shortcut}
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/layout/sidebar/sidebar-content.tsx:
--------------------------------------------------------------------------------
1 | import { Logo } from 'src/components'
2 |
3 | import { SideFooter } from './sidebar-footer'
4 | import { SidebarHeader } from './sidebar-header'
5 | import { SidebarMain } from './sidebar-main'
6 |
7 | export const SidebarContent = () => {
8 | return (
9 |
10 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/layout/sidebar/sidebar-footer/debug-data-item.tsx:
--------------------------------------------------------------------------------
1 | import { CodeBracketIcon } from '@heroicons/react/24/outline'
2 | import JsonView from '@uiw/react-json-view'
3 | import { nordTheme } from '@uiw/react-json-view/nord'
4 | import { useState } from 'react'
5 | import { Button, Modal } from 'src/components'
6 | import { logger } from 'src/utilities/logger'
7 | import { StorageUtilities } from 'src/utilities/storage-utilities'
8 |
9 | export const DebugData = () => {
10 | const [debugData, setDebugData] = useState({})
11 | const [open, setOpen] = useState(false)
12 |
13 | function onClose() {
14 | setOpen(false)
15 | }
16 |
17 | function onOpen() {
18 | StorageUtilities.getStorageData('debug-data')
19 | .then((data) => {
20 | setDebugData(data as object)
21 | setOpen(true)
22 | })
23 | .catch(logger.error)
24 | }
25 |
26 | return (
27 |
11 |
13 |
24 |
12 |
16 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/layout/sidebar/sidebar-header/use-create-collection.ts:
--------------------------------------------------------------------------------
1 | import type { Collection, PageData } from 'src/types'
2 |
3 | import { nanoid } from 'nanoid'
4 | import { useNavigate } from 'react-router-dom'
5 | import { useDashboard } from 'src/providers'
6 | import { StorageSvg } from 'src/scripts'
7 | import { formUtilities } from 'src/utilities/form-utilities'
8 | import { StorageUtilities } from 'src/utilities/storage-utilities'
9 | import { SvgUtilities } from 'src/utilities/svg-utilities'
10 |
11 | export const useCreateCollection = (files: File[]) => {
12 | const navigate = useNavigate()
13 | const { dispatch, state } = useDashboard()
14 |
15 | return async function (event: React.FormEvent18 |
47 | )
48 | }
49 |
50 | return '📁'
51 | }, [emoji, name, origin])
52 |
53 | return (
54 |
57 | {collectionIcon}
58 |
59 |
35 | {!userState.settings.sortCollections && (
36 |
46 |
41 |
43 | )}
44 | {children}
45 | -
30 |
48 | {title} 49 |
50 |
47 |
48 |
62 |
64 |
50 |
52 | {(resolvedData: CollectionData['data']) => {
53 | if (resolvedData.length === 0 || resolvedData === undefined) {
54 | return
59 |
60 |
61 |
18 |
20 |