Feature: Backgrounds served from a backend

.env.example

@@ -1,3 +1,5 @@
+VITE_UPTAB_API_KEY=
+
 VITE_GLITCHTIP_DSN=
 
 CHROME_CLIENT_ID=

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 UpTab adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [V1.3.0] — Unreleased
+
+### ✨ Added
+
+-
+
+### 🐛 Fixed
+
+-
+
+### 🧹 Removed
+
+-
+
+### ♻️ Changed
+
+-
+
 ## [V1.2.0] — 2024-02-16
 
 ### ✨ Added
@@ -75,6 +93,7 @@ UpTab adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   - Added Bookmarks: allowing you to easily view, open and delete your browser bookmarks
   - Added `CTRL+U` shortkey to open popup
 
+[V1.3.0]: https://github.com/AJGeel/uptab/compare/v1.3.0...v1.2.0
 [V1.2.0]: https://github.com/AJGeel/uptab/compare/v1.2.0...v1.1.0
 [V1.1.0]: https://github.com/AJGeel/uptab/compare/v1.1.0...v1.0.1
 [V1.0.1]: https://github.com/AJGeel/uptab/compare/v1.0.0...v1.0.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "uptab",
   "displayName": "UpTab",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "What's UpTab?",
   "author": "Arthur Geel <ageel@enrise.com>",
   "scripts": {
@@ -23,6 +23,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@sentry/browser": "^7.101.0",
     "@tanstack/react-query": "^5.20.5",

src/components/Homescreen/Homescreen.tsx

@@ -13,7 +13,6 @@ import ImageFadeIn from "../ui/ImageFadeIn";
 const Homescreen = () => {
   const { data: settings, isPending, toggleSidebarSetting } = useSettings();
   const { activeBg } = useRandomBackground();
-
   const isSidebarOpen = settings?.sidebar?.isOpen;
 
   useKeyPress(hotkeys.backslash, () => toggleSidebarSetting("isOpen"));
@@ -23,6 +22,9 @@ const Homescreen = () => {
     return <></>;
   }
 
+  const bgImage = activeBg.src;
+  // const bgImage = `http://localhost:3000/api/background?theme=${settings?.background.theme}`;
+
   return (
     <>
       <Modals />
@@ -33,7 +35,7 @@ const Homescreen = () => {
         />
         <ImageFadeIn
           asBackground={true}
-          src={activeBg.src}
+          src={bgImage}
           alt="A fancy background image"
           className={cn(
             "flex-1 bg-cover bg-center flex flex-col duration-500",

src/components/Modals/SettingsModal/SettingsModal.tsx

@@ -1,6 +1,7 @@
 import { Modals, useModalStore } from "@/src/hooks/stores/useModalStore";
 import useKeyPress, { hotkeys } from "@/src/hooks/useKeyPress";
 import { useSettings } from "@/src/hooks/useSettings";
+import { bgThemes } from "@/src/services/background/types";
 
 import { rows } from "./partials/rows";
 import SettingsRow from "./partials/SettingsRow";
@@ -30,11 +31,26 @@ const SettingsModal = () => {
       title="Edit Preferences"
       className="max-w-xl"
     >
-      <div className="mt-4 space-y-4">
+      <div className="mt-4 flex max-h-screen min-h-[420px] flex-col">
         {!!settings && (
-          <div className="flex flex-col">
+          <div className="flex grow flex-col">
             <Tabs
               tabs={[
+                {
+                  label: "Background",
+                  content: (
+                    <>
+                      <SettingsRow
+                        title={rows.background[0].title}
+                        description={rows.background[0].description}
+                        type="Dropdown"
+                        options={Object.values(bgThemes)}
+                        selected={settings.background.theme}
+                        onClick={() => {}}
+                      />
+                    </>
+                  ),
+                },
                 {
                   label: "Sidebar",
                   content: (
@@ -44,6 +60,7 @@ const SettingsModal = () => {
                           key={"sidebar" + row.title}
                           title={row.title}
                           description={row.description}
+                          type="Switch"
                           isActive={settings.sidebar[row.setting]}
                           onClick={() => {
                             toggleSidebarSetting(row.setting);
@@ -61,6 +78,7 @@ const SettingsModal = () => {
                         <SettingsRow
                           key={"description" + row.title}
                           title={row.title}
+                          type="Switch"
                           description={row.description}
                           isActive={settings.homescreen[row.setting]}
                           onClick={() => {
@@ -75,7 +93,7 @@ const SettingsModal = () => {
             />
           </div>
         )}
-        <div className="flex items-center justify-end gap-2">
+        <div className="mt-auto flex items-center justify-end gap-2 pt-4">
           <Button
             label="Reset defaults"
             variant={buttonVariants.secondary}

src/components/Modals/SettingsModal/partials/SettingsRow.tsx

@@ -1,16 +1,41 @@
 import { ReactElement } from "react";
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/src/components/ui/Select";
 import { Switch } from "@/src/components/ui/Switch";
 
+type SwitchProps = {
+  type: "Switch";
+  isActive: boolean;
+};
+
+type DropdownProps = {
+  type: "Dropdown";
+  options: string[];
+  selected: string;
+};
+
 type Props = {
   title: string;
   description: string;
   icon?: ReactElement;
-  isActive: boolean;
   onClick: () => void;
-};
+} & (SwitchProps | DropdownProps);
 
-const SettingsRow = ({ title, description, isActive, onClick }: Props) => (
+const SettingsRow = ({
+  title,
+  description,
+  type,
+  onClick,
+  options,
+  selected,
+  isActive,
+}: Props) => (
   <div
     className="group flex cursor-pointer items-center justify-between gap-2 border-b py-3 last:border-b-0"
     onClick={onClick}
@@ -23,7 +48,27 @@ const SettingsRow = ({ title, description, isActive, onClick }: Props) => (
         {description}
       </p>
     </div>
-    <Switch checked={isActive} onCheckedChange={onClick} />
+    {type === "Switch" && (
+      <Switch checked={isActive} onCheckedChange={onClick} />
+    )}
+    {type === "Dropdown" && (
+      <Select>
+        <SelectTrigger className="w-[180px] capitalize">
+          <SelectValue placeholder="Huts" className="capitalize" />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((item) => (
+            <SelectItem
+              key={item}
+              value={item}
+              className="cursor-pointer capitalize duration-150 hover:bg-sky-100"
+            >
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )}
   </div>
 );
 

src/components/Modals/SettingsModal/partials/rows.ts

@@ -1,9 +1,15 @@
 import {
+  BackgroundSettings,
   HomescreenSettings,
   SidebarSettings,
 } from "@/src/services/settings/types";
 
 type SettingsRows = {
+  background: {
+    setting: keyof BackgroundSettings;
+    title: string;
+    description: string;
+  }[];
   sidebar: {
     setting: keyof SidebarSettings;
     title: string;
@@ -17,6 +23,13 @@ type SettingsRows = {
 };
 
 export const rows: SettingsRows = {
+  background: [
+    {
+      setting: "theme",
+      title: "Background theme",
+      description: "Pick a snazzy theme",
+    },
+  ],
   sidebar: [
     {
       setting: "showInfoWidget",