chore: bug fixes and download sidebar item

Author: smithg09

README.md

@@ -124,13 +124,13 @@ Access app from the browser at `http://localhost:3001`
 
 ### Build
 
-__Static web build__
+**Static web build**
 
 ```bash
   yarn build
 ```
 
-__Desktop (Tauri) build__
+**Desktop (Tauri) build**
 
 ```bash
   yarn tauri build

src-tauri/tauri.conf.json

@@ -2,11 +2,7 @@
   "bundle": {
     "targets": "all",
     "active": true,
-    "icon": [
-      "icons/icon.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ],
+    "icon": ["icons/icon.png", "icons/icon.icns", "icons/icon.ico"],
     "windows": {
       "timestampUrl": "",
       "certificateThumbprint": null,
@@ -46,9 +42,7 @@
   "mainBinaryName": "devbox",
   "plugins": {
     "updater": {
-      "endpoints": [
-        "https://github.com/smithg09/devbox/releases/latest/download/latest.json"
-      ],
+      "endpoints": ["https://github.com/smithg09/devbox/releases/latest/download/latest.json"],
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IENFNzFGMjVDNjFFMEI3QkIKUldTN3QrQmhYUEp4em5JRjBvTkFPRG1Zd1RsMkVuOUZKcnhwc1JOWnA4Vm03RkZocHFhTzBwY0IK"
     }
   },
@@ -57,13 +51,9 @@
     "security": {
       "assetProtocol": {
         "enable": true,
-        "scope": [
-          "http://asset.localhost"
-        ]
+        "scope": ["http://asset.localhost"]
       },
-      "dangerousDisableAssetCspModification": [
-        "style-src"
-      ],
+      "dangerousDisableAssetCspModification": ["style-src"],
       "csp": {
         "connect-src": [
           "https://www.google-analytics.com",
@@ -91,28 +81,16 @@
           "tauri:",
           "asset:"
         ],
-        "worker-src": [
-          "'self'",
-          "blob:",
-          "https://unpkg.com"
-        ],
+        "worker-src": ["'self'", "blob:", "https://unpkg.com"],
         "script-src": [
           "'self'",
           "'unsafe-inline'",
           "'unsafe-eval'",
           "https://www.googletagmanager.com",
           "https://www.google-analytics.com"
         ],
-        "style-src": [
-          "'self'",
-          "'unsafe-inline'",
-          "https://fonts.googleapis.com"
-        ],
-        "font-src": [
-          "'self'",
-          "data:",
-          "https://fonts.gstatic.com"
-        ],
+        "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+        "font-src": ["'self'", "data:", "https://fonts.gstatic.com"],
         "img-src": [
           "'self'",
           "data:",

src/components/Sidebar/index.tsx

@@ -22,11 +22,12 @@ import { isTauri } from "@/utils/isTauri";
 import { formatShortcutDisplay } from "@/utils/keyboard";
 import { DragDropContext, Draggable, Droppable, OnDragEndResponder } from "@hello-pangea/dnd";
 import { useLocalStorage } from "@mantine/hooks";
-import { BsGear, BsHouse, BsSearch } from "react-icons/bs";
+import { BsDownload, BsGear, BsHouse, BsSearch } from "react-icons/bs";
 import { SidebarConfig } from "../Settings";
 import { SIDEBAR_CONSTANTS } from "./constants";
 import Tool from "./Tool";
 import { DropDownItem, Props, SidebarTool } from "./types";
+import { APP_CONFIG } from "@/constants/app";
 
 export const Sidebar = ({ collapsed, setCollapsed }: Props) => {
   const location = useLocation();
@@ -331,6 +332,47 @@ export const Sidebar = ({ collapsed, setCollapsed }: Props) => {
 
       <Divider w="90%" mx="auto" mt={0} />
       <Stack className={classes.settingsSection} mt={4}>
+        {!isTauri() && (
+          <Box
+            className={cx(classes.navigationItem)}
+            onClick={() => window.open(APP_CONFIG.RELEASES_URL, "_blank")}
+          >
+            <Box className={classes.itemContent} w="100%">
+              {collapsed ? (
+                <BsGear size={SIDEBAR_CONSTANTS.ICON_SIZE.LARGE} />
+              ) : (
+                <>
+                  <BsDownload
+                    size={SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM}
+                    style={{ minWidth: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM }}
+                  />
+                  <Box w="80%">
+                    <Text size="xs" fw="450">
+                      Download App
+                      {showDescription && (
+                        <Text
+                          size="11px"
+                          c="dimmed"
+                          mt={2}
+                          w="100%"
+                          styles={{
+                            root: {
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                            },
+                          }}
+                        >
+                          Get the desktop app for the best experience
+                        </Text>
+                      )}
+                    </Text>
+                  </Box>
+                </>
+              )}
+            </Box>
+          </Box>
+        )}
         <Box
           className={cx(classes.navigationItem, {
             [classes.selectedNavigationItem]: location.pathname === "/settings",

src/constants/app.ts

@@ -1,4 +1,6 @@
 export const APP_CONFIG = {
+  PROJECT_URL: "https://github.com/smithg09/devbox",
+  RELEASES_URL: "https://github.com/smithg09/devbox/releases",
   PANEL: {
     sidebar: {
       defaultSize: 15,

src/pages/ssh/components/KeyDisplay.tsx

@@ -62,16 +62,16 @@ export function KeyDisplay({ keys, handleBack }: KeyDisplayProps) {
               <Text fw={600} size="sm" c="red">
                 Private Key
               </Text>
-              <CopyButton value={keys.privateKey} label="Copy Private Key" />
+              <CopyButton variant="light" value={keys.privateKey} label="Copy Private Key" />
             </Group>
             <Textarea
               value={keys.privateKey}
               readOnly
-              rows={6}
+              rows={8}
               styles={{
                 input: {
                   fontFamily: "monospace",
-                  fontSize: "11px",
+                  fontSize: "13px",
                 },
               }}
             />
@@ -83,16 +83,16 @@ export function KeyDisplay({ keys, handleBack }: KeyDisplayProps) {
               <Text fw={600} size="sm" c="green">
                 Public Key
               </Text>
-              <CopyButton value={keys.publicKey} label="Copy Public Key" />
+              <CopyButton variant="light" value={keys.publicKey} label="Copy Public Key" />
             </Group>
             <Textarea
               value={keys.publicKey}
               readOnly
-              rows={6}
+              rows={8}
               styles={{
                 input: {
                   fontFamily: "monospace",
-                  fontSize: "11px",
+                  fontSize: "13px",
                 },
               }}
             />
@@ -120,7 +120,7 @@ export function KeyDisplay({ keys, handleBack }: KeyDisplayProps) {
             <Text size="sm" ff="monospace" c="dark">
               {keys.fingerprint.md5}
             </Text>
-            <CopyButton value={keys.fingerprint.md5} label="Copy MD5" />
+            <CopyButton variant="light" value={keys.fingerprint.md5} label="Copy MD5" />
           </Group>
         </Box>
         <Box>
@@ -131,7 +131,7 @@ export function KeyDisplay({ keys, handleBack }: KeyDisplayProps) {
             <Text size="sm" ff="monospace" c="dark">
               {keys.fingerprint.sha256}
             </Text>
-            <CopyButton value={keys.fingerprint.sha256} label="Copy SHA256" />
+            <CopyButton variant="light" value={keys.fingerprint.sha256} label="Copy SHA256" />
           </Group>
         </Box>
         {keys.comment && (

src/pages/timezone/Timezone.tsx

@@ -33,6 +33,10 @@ export default function Timezone() {
       if (mounted && saved && saved.version === 1) {
         setPreferences(saved);
         setReference(saved.lastReferenceIso ? new Date(saved.lastReferenceIso) : new Date());
+        console.log("Loaded timezone prefs", saved);
+        if (saved.live !== undefined) {
+          setLive(saved.live);
+        }
       }
     })();
     return () => {
@@ -43,6 +47,7 @@ export default function Timezone() {
   useEffect(() => {
     const toSave: TimezonePreferencesV1 = {
       ...preferences,
+      live,
       lastReferenceIso: reference.toISOString(),
     };
     settingsStore.update(TIMEZONE_PREFERENCES_KEY, toSave);

src/pages/timezone/types.ts

@@ -21,6 +21,7 @@ export interface TimezonePreferencesV1 {
   timeFormat: TimeFormat;
   lastReferenceIso?: string;
   sliderZoom: SliderZoom;
+  live?: boolean;
 }
 
 export const TIMEZONE_PREFERENCES_KEY = "timezone.preferences";