feat: v0.0.10 (#23)

* feat: single SOT for themes + basic custom support

* fix: adjust colors for yuu theme

* feat: Allow loading of environment variables from file (#20)

* feat: allow loading of environment variables from file

* Panic if a file for an environment variable cannot be read

* Use log.Fatalf + os.Exit instead of panic

* fix: remove supurfluous call to os.Exit()

---------

Co-authored-by: adaexec <nixos-git.s1pht@simplelogin.com>
Co-authored-by: Gabe Farrell <90876006+gabehf@users.noreply.github.com>

* chore: add pr test workflow

* chore: changelog

* feat: make all activity grids configurable

* fix: adjust activity grid style

* fix: make background gradient consistent size

* revert: remove year from activity grid opts

* style: adjust top item list min size to 200px

* feat: add support for custom themes

* fix: stabilized the order of top items

* chore: update changelog

* feat: native import & export

* fix: use correct request body for alias requests

* fix: clear input when closing edit modal

* chore: changelog

* docs: make endpoint clearer for some apps

* feat: add ui and handler for export

* fix: fix pr test workflow

---------

Co-authored-by: adaexec <78047743+adaexec@users.noreply.github.com>
Co-authored-by: adaexec <nixos-git.s1pht@simplelogin.com>

client/app/components/ActivityGrid.tsx

@@ -45,7 +45,6 @@ export default function ActivityGrid({
         albumId = 0,
         trackId = 0,
         configurable = false,
-        autoAdjust = false,
     }: Props) {
 
     const [color, setColor] = useState(getPrimaryColor())
@@ -111,24 +110,26 @@ export default function ActivityGrid({
 
     const getDarkenAmount = (v: number, t: number): number => {
 
-        if (autoAdjust) {
-            // automatically adjust the target value based on step
-            // the smartest way to do this would be to have the api return the
-            // highest value in the range. too bad im not smart
-            switch (stepState) {
-                case 'day':
-                    t = 10
-                    break;
-                case 'week':
-                    t = 20
-                    break;
-                case 'month':
-                    t = 50
-                    break;
-                case 'year':
-                    t = 100
-                    break;
-            }
+        // really ugly way to just check if this is for all items and not a specific item.
+        // is it jsut better to just pass the target in as a var? probably.
+        const adjustment = artistId == albumId && albumId == trackId && trackId == 0 ? 10 : 1
+
+        // automatically adjust the target value based on step
+        // the smartest way to do this would be to have the api return the
+        // highest value in the range. too bad im not smart
+        switch (stepState) {
+            case 'day':
+                t = 10 * adjustment
+                break;
+            case 'week':
+                t = 20 * adjustment
+                break;
+            case 'month':
+                t = 50 * adjustment
+                break;
+            case 'year':
+                t = 100 * adjustment
+                break;
         }
 
         v = Math.min(v, t)
@@ -142,45 +143,58 @@ export default function ActivityGrid({
         }
     }
 
-    return (<div className="flex flex-col items-start">
-        <h2>Activity</h2>
-        {configurable ? (
-            <ActivityOptsSelector
-                rangeSetter={setRange}
-                currentRange={rangeState}
-                stepSetter={setStep}
-                currentStep={stepState}
-            />
-        ) : (
-            ''
-        )}
-        <div className="w-auto grid grid-flow-col grid-rows-7 gap-[3px] md:gap-[5px]">
-            {data.map((item) => (
+    const CHUNK_SIZE = 26 * 7;
+    const chunks = [];
+    
+    for (let i = 0; i < data.length; i += CHUNK_SIZE) {
+        chunks.push(data.slice(i, i + CHUNK_SIZE));
+    }
+    
+    return (
+        <div className="flex flex-col items-start">
+            <h2>Activity</h2>
+            {configurable ? (
+                <ActivityOptsSelector
+                    rangeSetter={setRange}
+                    currentRange={rangeState}
+                    stepSetter={setStep}
+                    currentStep={stepState}
+                />
+            ) : null}
+    
+            {chunks.map((chunk, index) => (
                 <div
-                    key={new Date(item.start_time).toString()}
-                    className="w-[10px] sm:w-[12px] h-[10px] sm:h-[12px]"
+                    key={index}
+                    className="w-auto grid grid-flow-col grid-rows-7 gap-[3px] md:gap-[5px] mb-4"
                 >
-                    <Popup
-                        position="top"
-                        space={12}
-                        extraClasses="left-2"
-                        inner={`${new Date(item.start_time).toLocaleDateString()} ${item.listens} plays`}
-                    >
+                    {chunk.map((item) => (
                         <div
-                            style={{
-                                display: 'inline-block',
-                                background:
-                                    item.listens > 0
-                                        ? LightenDarkenColor(color, getDarkenAmount(item.listens, 100))
-                                        : 'var(--color-bg-secondary)',
-                            }}
-                            className={`w-[10px] sm:w-[12px] h-[10px] sm:h-[12px] rounded-[2px] md:rounded-[3px] ${item.listens > 0 ? '' : 'border-[0.5px] border-(--color-bg-tertiary)'}`}
-                        ></div>
-                    </Popup>
+                            key={new Date(item.start_time).toString()}
+                            className="w-[10px] sm:w-[12px] h-[10px] sm:h-[12px]"
+                        >
+                            <Popup
+                                position="top"
+                                space={12}
+                                extraClasses="left-2"
+                                inner={`${new Date(item.start_time).toLocaleDateString()} ${item.listens} plays`}
+                            >
+                                <div
+                                    style={{
+                                        display: 'inline-block',
+                                        background:
+                                            item.listens > 0
+                                                ? LightenDarkenColor(color, getDarkenAmount(item.listens, 100))
+                                                : 'var(--color-bg-secondary)',
+                                    }}
+                                    className={`w-[10px] sm:w-[12px] h-[10px] sm:h-[12px] rounded-[2px] md:rounded-[3px] ${
+                                        item.listens > 0 ? '' : 'border-[0.5px] border-(--color-bg-tertiary)'
+                                    }`}
+                                ></div>
+                            </Popup>
+                        </div>
+                    ))}
                 </div>
             ))}
         </div>
-    </div>
-    
     );
-}
+}    

client/app/components/ActivityOptsSelector.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useEffect, useState } from "react";
 
 interface Props {
     stepSetter: (value: string) => void;
@@ -15,18 +16,15 @@ export default function ActivityOptsSelector({
     currentRange,
     disableCache = false,
 }: Props) {
-    const stepPeriods = ['day', 'week', 'month', 'year'];
-    const rangePeriods = [105, 182, 365];
+    const stepPeriods = ['day', 'week', 'month'];
+    const rangePeriods = [105, 182, 364];
+    const [collapsed, setCollapsed] = useState(true);
 
-    const stepDisplay = (str: string): string => {
-        return str.split('_').map(w =>
-            w.split('').map((char, index) =>
-                index === 0 ? char.toUpperCase() : char).join('')
-        ).join(' ');
-    };
-
-    const rangeDisplay = (r: number): string => {
-        return `${r}`
+    const setMenuOpen = (val: boolean) => {
+        setCollapsed(val)
+        if (!disableCache) {
+            localStorage.setItem('activity_configuring_' + window.location.pathname.split('/')[1], String(!val));
+        }
     }
 
     const setStep = (val: string) => {
@@ -42,56 +40,66 @@ export default function ActivityOptsSelector({
             localStorage.setItem('activity_range_' + window.location.pathname.split('/')[1], String(val));
         }
     };
-    
+
     useEffect(() => {
         if (!disableCache) {
             const cachedRange = parseInt(localStorage.getItem('activity_range_' + window.location.pathname.split('/')[1]) ?? '35');
-            if (cachedRange) {
-              rangeSetter(cachedRange);
-            }
+            if (cachedRange) rangeSetter(cachedRange);
             const cachedStep = localStorage.getItem('activity_step_' + window.location.pathname.split('/')[1]);
-            if (cachedStep) {
-              stepSetter(cachedStep);
-            }
+            if (cachedStep) stepSetter(cachedStep);
+            const cachedConfiguring = localStorage.getItem('activity_configuring_' + window.location.pathname.split('/')[1]);
+            if (cachedStep) setMenuOpen(cachedConfiguring !== "true");
         }
-      }, []);
+    }, []);
 
     return (
-        <div className="flex flex-col">
-            <div className="flex gap-2 items-center">
-                <p>Step:</p>
-                {stepPeriods.map((p, i) => (
-                    <div key={`step_selector_${p}`}>
-                        <button 
-                            className={`period-selector ${p === currentStep ? 'color-fg' : 'color-fg-secondary'} ${i !== stepPeriods.length - 1 ? 'pr-2' : ''}`}
-                            onClick={() => setStep(p)}
-                            disabled={p === currentStep}
-                        >
-                            {stepDisplay(p)}
-                        </button>
-                        <span className="color-fg-secondary">
-                            {i !== stepPeriods.length - 1 ? '|' : ''}
-                        </span>
-                    </div>
-                ))}
-            </div>
+        <div className="relative w-full">
+            <button
+                onClick={() => setMenuOpen(!collapsed)}
+                className="absolute left-[75px] -top-9 text-muted hover:color-fg transition"
+                title="Toggle options"
+            >
+                {collapsed ? <ChevronDown size={18} /> : <ChevronUp size={18} />}
+            </button>
 
-            <div className="flex gap-2 items-center">
-                <p>Range:</p>
-                {rangePeriods.map((r, i) => (
-                    <div key={`range_selector_${r}`}>
-                        <button 
-                            className={`period-selector ${r === currentRange ? 'color-fg' : 'color-fg-secondary'} ${i !== rangePeriods.length - 1 ? 'pr-2' : ''}`}
-                            onClick={() => setRange(r)}
-                            disabled={r === currentRange}
-                        >
-                            {rangeDisplay(r)}
-                        </button>
-                        <span className="color-fg-secondary">
-                            {i !== rangePeriods.length - 1 ? '|' : ''}
-                        </span>
+            <div
+                className={`overflow-hidden transition-[max-height,opacity] duration-250 ease ${
+                    collapsed ? 'max-h-0 opacity-0' : 'max-h-[100px] opacity-100'
+                }`}
+            >
+                <div className="flex flex-wrap gap-4 mt-1 text-sm">
+                    <div className="flex items-center gap-1">
+                        <span className="text-muted">Step:</span>
+                        {stepPeriods.map((p) => (
+                            <button
+                                key={p}
+                                className={`px-1 rounded transition ${
+                                    p === currentStep ? 'color-fg font-medium' : 'color-fg-secondary hover:color-fg'
+                                }`}
+                                onClick={() => setStep(p)}
+                                disabled={p === currentStep}
+                            >
+                                {p}
+                            </button>
+                        ))}
                     </div>
-                ))}
+
+                    <div className="flex items-center gap-1">
+                        <span className="text-muted">Range:</span>
+                        {rangePeriods.map((r) => (
+                            <button
+                                key={r}
+                                className={`px-1 rounded transition ${
+                                    r === currentRange ? 'color-fg font-medium' : 'color-fg-secondary hover:color-fg'
+                                }`}
+                                onClick={() => setRange(r)}
+                                disabled={r === currentRange}
+                            >
+                                {r}
+                            </button>
+                        ))}
+                    </div>
+                </div>
             </div>
         </div>
     );

client/app/components/LastPlays.tsx

@@ -16,7 +16,6 @@ interface Props {
 
 export default function LastPlays(props: Props) {
     const { user } = useAppContext()
-    console.log(user)
     const { isPending, isError, data, error } = useQuery({
         queryKey: ['last-listens', {
             limit: props.limit,

client/app/components/TopItemList.tsx

@@ -14,7 +14,7 @@ interface Props<T extends Item> {
 export default function TopItemList<T extends Item>({ data, separators, type, className }: Props<T>) {
 
     return (
-        <div className={`flex flex-col gap-1 ${className} min-w-[300px]`}>
+        <div className={`flex flex-col gap-1 ${className} min-w-[200px]`}>
             {data.items.map((item, index) => {
                 const key = `${type}-${item.id}`;
                 return (

client/app/components/modals/EditModal/EditModal.tsx

@@ -95,11 +95,15 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
             }
         })
         setLoading(false)
+    }
 
+    const handleClose = () => {
+        setOpen(false)
+        setInput('')
     }
 
     return (
-        <Modal maxW={1000} isOpen={open} onClose={() => setOpen(false)}>
+        <Modal maxW={1000} isOpen={open} onClose={handleClose}>
             <div className="flex flex-col items-start gap-6 w-full">
                 <div className="w-full">
                     <h2>Alias Manager</h2>

client/app/components/modals/ExportModal.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { AsyncButton } from "../AsyncButton";
+import { getExport } from "api/api";
+
+export default function ExportModal() {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+
+    const handleExport = () => {
+        setLoading(true)
+        fetch(`/apis/web/v1/export`, {
+            method: "GET"
+        })
+        .then(res => {
+            if (res.ok) {
+                res.blob()
+                .then(blob => {
+                    const url = window.URL.createObjectURL(blob)
+                    const a = document.createElement("a")
+                    a.href = url
+                    a.download = "koito_export.json"
+                    document.body.appendChild(a)
+                    a.click()
+                    a.remove()
+                    window.URL.revokeObjectURL(url)
+                    setLoading(false)
+                })
+            } else {
+                res.json().then(r => setError(r.error))
+                setLoading(false)
+            }
+        }).catch(err => {
+            setError(err)
+            setLoading(false)
+        })
+    }
+
+    return (
+        <div>
+            <h2>Export</h2>
+            <AsyncButton loading={loading} onClick={handleExport}>Export Data</AsyncButton>
+            {error && <p className="error">{error}</p>}
+        </div>
+    )
+}

client/app/components/modals/SettingsModal.tsx

@@ -5,6 +5,8 @@ import { ThemeSwitcher } from "../themeSwitcher/ThemeSwitcher";
 import ThemeHelper from "../../routes/ThemeHelper";
 import { useAppContext } from "~/providers/AppProvider";
 import ApiKeysModal from "./ApiKeysModal";
+import { AsyncButton } from "../AsyncButton";
+import ExportModal from "./ExportModal";
 
 interface Props {
     open: boolean 
@@ -19,7 +21,7 @@ export default function SettingsModal({ open, setOpen } : Props) {
     const contentClasses = "w-full px-2 mt-8 sm:mt-0 sm:px-10 overflow-y-auto"
 
     return (
-        <Modal h={600} isOpen={open} onClose={() => setOpen(false)} maxW={900}>
+        <Modal h={700} isOpen={open} onClose={() => setOpen(false)} maxW={900}>
             <Tabs
                 defaultValue="Appearance"
                 orientation="vertical" // still vertical, but layout is responsive via Tailwind
@@ -29,9 +31,12 @@ export default function SettingsModal({ open, setOpen } : Props) {
                     <TabsTrigger className={triggerClasses} value="Appearance">Appearance</TabsTrigger>
                     <TabsTrigger className={triggerClasses} value="Account">Account</TabsTrigger>
                     {user && (
-                        <TabsTrigger className={triggerClasses} value="API Keys">
-                            API Keys
-                        </TabsTrigger>
+                        <>
+                            <TabsTrigger className={triggerClasses} value="API Keys">
+                                API Keys
+                            </TabsTrigger>
+                            <TabsTrigger className={triggerClasses} value="Export">Export</TabsTrigger>
+                        </>
                     )}
                 </TabsList>
 
@@ -44,6 +49,9 @@ export default function SettingsModal({ open, setOpen } : Props) {
                 <TabsContent value="API Keys" className={contentClasses}>
                     <ApiKeysModal />
                 </TabsContent>
+                <TabsContent value="Export" className={contentClasses}>
+                    <ExportModal />
+                </TabsContent>
             </Tabs>
         </Modal>
     )

client/app/components/themeSwitcher/ThemeSwitcher.tsx

@@ -1,36 +1,69 @@
 // ThemeSwitcher.tsx
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
-import { themes } from '~/providers/ThemeProvider';
+import themes from '~/styles/themes.css';
 import ThemeOption from './ThemeOption';
+import { AsyncButton } from '../AsyncButton';
 
 export function ThemeSwitcher() {
     const { theme, setTheme } = useTheme();
-
-
-    useEffect(() => {
-        const saved = localStorage.getItem('theme');
-        if (saved && saved !== theme) {
-            setTheme(saved);
-        } else if (!saved) {
-            localStorage.setItem('theme', theme)
+        const initialTheme = {
+            bg: "#1e1816",
+            bgSecondary: "#2f2623",
+            bgTertiary: "#453733",
+            fg: "#f8f3ec",
+            fgSecondary: "#d6ccc2",
+            fgTertiary: "#b4a89c",
+            primary: "#f5a97f",
+            primaryDim: "#d88b65",
+            accent: "#f9db6d",
+            accentDim: "#d9bc55",
+            error: "#e26c6a",
+            warning: "#f5b851",
+            success: "#8fc48f",
+            info: "#87b8dd",
+        }
+    
+        const { setCustomTheme, getCustomTheme } = useTheme()
+        const [custom, setCustom] = useState(JSON.stringify(getCustomTheme() ?? initialTheme, null, "  "))
+    
+        const handleCustomTheme = () => {
+            console.log(custom)
+            try {
+                const theme = JSON.parse(custom)
+                theme.name = "custom"
+                setCustomTheme(theme)
+                delete theme.name
+                setCustom(JSON.stringify(theme, null, "  "))
+                console.log(theme)
+            } catch(err) {
+                console.log(err)
+            }
         }
-    }, []);
 
     useEffect(() => {
         if (theme) {
-            localStorage.setItem('theme', theme)
+            setTheme(theme)
         }
     }, [theme]);
 
     return (
-        <>
-        <h2>Select Theme</h2>
-        <div className="grid grid-cols-2 items-center gap-2">
-            {themes.map((t) => (
-                <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
-            ))}
+        <div className='flex flex-col gap-10'>
+            <div>
+                <h2>Select Theme</h2>
+                <div className="grid grid-cols-2 items-center gap-2">
+                    {themes.map((t) => (
+                        <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
+                    ))}
+                </div>
+            </div>
+            <div>
+                <h2>Use Custom Theme</h2>
+                <div className="flex flex-col items-center gap-3 bg-secondary p-5 rounded-lg">
+                    <textarea name="custom-theme" onChange={(e) => setCustom(e.target.value)} id="custom-theme-input" className="bg-(--color-bg) h-[450px] w-[300px] p-5 rounded-md" value={custom} /> 
+                    <AsyncButton onClick={handleCustomTheme}>Submit</AsyncButton>
+                </div>
+            </div>
         </div>
-        </>
     );
 }