From 5dc325fd908035710b53421e208fba0a7f97e8ec Mon Sep 17 00:00:00 2001
From: georg-stone <george@thingbomb.com>
Date: Fri, 10 Jan 2025 22:33:27 -0500
Subject: [PATCH 1/3] fix sizing in onboarding process

---
 apps/new-tab/src/App.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/new-tab/src/App.tsx b/apps/new-tab/src/App.tsx
index 381cb1af..e0e24831 100644
--- a/apps/new-tab/src/App.tsx
+++ b/apps/new-tab/src/App.tsx
@@ -318,39 +318,39 @@ const App: Component = () => {
           <h1 class="mb-4 text-5xl font-[600]">
             {chrome.i18n.getMessage("choose_mode")}
           </h1>
-          <div class="**:data-selected:!ring-primary grid w-full grid-cols-1 grid-rows-3 gap-4">
+          <div class="**:data-selected:!ring-primary grid w-full grid-cols-1 grid-rows-3 gap-2">
             <button
-              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 block h-[198px] w-full cursor-pointer overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
+              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 flex h-[78px] w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
               {...(mode() === "widgets" ? { "data-selected": true } : {})}
               onClick={() => {
                 setMode("widgets");
               }}
             >
-              <Grid class="size-[64px]" />
+              <Grid class="size-[32px]" />
               <br />
               <span class="text-xl">{chrome.i18n.getMessage("widgets")}</span>
             </button>
             <button
-              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 block h-[198px] w-full cursor-pointer overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
+              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 flex h-[78px] w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
               {...(mode() === "nightstand" ? { "data-selected": true } : {})}
               onClick={() => {
                 setMode("nightstand");
               }}
             >
-              <Clock class="size-[64px]" />
+              <Clock class="size-[32px]" />
               <br />
               <span class="text-xl">
                 {chrome.i18n.getMessage("nightstand")}
               </span>
             </button>
             <button
-              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 block h-[198px] w-full cursor-pointer overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
+              class="card not-prose dark:bg-background-dark border-1 hover:!border-primary dark:hover:!border-primary-light group relative my-2 flex h-[78px] w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl border-gray-950/10 pl-8 text-left font-normal ring-2 ring-transparent dark:border-white/10"
               {...(mode() === "speeddial" ? { "data-selected": true } : {})}
               onClick={() => {
                 setMode("speeddial");
               }}
             >
-              <Bookmark class="size-[64px]" />
+              <Bookmark class="size-[32px]" />
               <br />
               <span class="text-xl">
                 {chrome.i18n.getMessage("speed_dial")}

From a144600723b3f8790cd7ab79dfe17d29070b900e Mon Sep 17 00:00:00 2001
From: georg-stone <george@thingbomb.com>
Date: Sun, 12 Jan 2025 01:28:33 -0500
Subject: [PATCH 2/3] add comic sans support

---
 apps/new-tab/public/_locales/en/messages.json |  3 +++
 apps/new-tab/src/App.tsx                      |  1 +
 apps/new-tab/src/Settings.tsx                 | 21 +++++++++++++++----
 apps/new-tab/tailwind.config.cjs              |  3 +++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/new-tab/public/_locales/en/messages.json b/apps/new-tab/public/_locales/en/messages.json
index bcbd8c65..a8efd5ac 100644
--- a/apps/new-tab/public/_locales/en/messages.json
+++ b/apps/new-tab/public/_locales/en/messages.json
@@ -316,5 +316,8 @@
   },
   "date": {
     "message": "Date"
+  },
+  "comic_sans": {
+    "message": "Comic Sans"
   }
 }
diff --git a/apps/new-tab/src/App.tsx b/apps/new-tab/src/App.tsx
index e0e24831..7f5f4199 100644
--- a/apps/new-tab/src/App.tsx
+++ b/apps/new-tab/src/App.tsx
@@ -541,6 +541,7 @@ const App: Component = () => {
         `font-mono`,
         `font-serif`,
         `font-sans`,
+        `font-comic-sans`,
         `transition-all`,
         `font-${currentFont()}`,
         imageLoaded() ? "bg-black dark:bg-none" : "",
diff --git a/apps/new-tab/src/Settings.tsx b/apps/new-tab/src/Settings.tsx
index ad2fe7e3..23f34575 100644
--- a/apps/new-tab/src/Settings.tsx
+++ b/apps/new-tab/src/Settings.tsx
@@ -113,9 +113,10 @@ function SettingsTrigger({
         class={cn(
           "text-foreground bg-background fixed inset-0 z-10 grid max-h-screen grid-cols-[300px_calc(100vw-300px)]",
           {
-            "**:!font-sans": font() == "sans",
-            "**:!font-serif": font() == "serif",
-            "**:!font-mono": font() == "mono",
+            "**:font-sans": font() == "sans",
+            "**:font-serif": font() == "serif",
+            "**:font-mono": font() == "mono",
+            "**:font-comic-sans": font() == "comic-sans",
           }
         )}
       >
@@ -328,7 +329,7 @@ function SettingsTrigger({
               <h3 class="text-2xl font-[500]">
                 {chrome.i18n.getMessage("font")}
               </h3>
-              <div class="card-group grid-cols-3 grid-rows-1">
+              <div class="card-group grid-cols-2 grid-rows-2">
                 <BigButton
                   {...(font() === "sans" ? { "data-selected": true } : {})}
                   onClick={() => {
@@ -353,6 +354,18 @@ function SettingsTrigger({
                   title={chrome.i18n.getMessage("mono")}
                   icon={<span class="!font-mono !text-5xl font-bold">Aa</span>}
                 />
+                <BigButton
+                  {...(font() === "comic-sans"
+                    ? { "data-selected": true }
+                    : {})}
+                  onClick={() => {
+                    setFont("comic-sans");
+                  }}
+                  title={chrome.i18n.getMessage("comic_sans")}
+                  icon={
+                    <span class="!font-comic-sans !text-5xl font-bold">Aa</span>
+                  }
+                />
               </div>
               <br />
               <br />
diff --git a/apps/new-tab/tailwind.config.cjs b/apps/new-tab/tailwind.config.cjs
index 2ac9fb16..c50b944e 100644
--- a/apps/new-tab/tailwind.config.cjs
+++ b/apps/new-tab/tailwind.config.cjs
@@ -47,6 +47,9 @@ module.exports = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
+      fontFamily: {
+        "comic-sans": "Comic Sans MS, Comic Sans, cursive",
+      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",

From 1563cc61157116103fd08976f203b53f3c9acf64 Mon Sep 17 00:00:00 2001
From: georg-stone <george@thingbomb.com>
Date: Sun, 12 Jan 2025 01:33:28 -0500
Subject: [PATCH 3/3] add bookmark favicons

---
 apps/new-tab/src/Widgets.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/new-tab/src/Widgets.tsx b/apps/new-tab/src/Widgets.tsx
index 4a1016d0..2214b940 100644
--- a/apps/new-tab/src/Widgets.tsx
+++ b/apps/new-tab/src/Widgets.tsx
@@ -362,6 +362,10 @@ function BookmarksWidget() {
       });
     }
   });
+  function getDomain(url: string) {
+    const domain = new URL(url).hostname;
+    return domain;
+  }
   return (
     <div class="absolute inset-0 overflow-hidden rounded-[20px] bg-black/30 p-[10px] pb-0 shadow-inner shadow-white/10 backdrop-blur-3xl">
       <div class="h-full w-full rounded-[10px]">
@@ -384,8 +388,12 @@ function BookmarksWidget() {
                     <a
                       href={bookmark.url}
                       target="_blank"
-                      class="text-foreground overflow-hidden text-ellipsis whitespace-nowrap text-[17px] font-medium"
+                      class="text-foreground flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-[17px] font-medium"
                     >
+                      <img
+                        src={`https://www.google.com/s2/favicons?domain=${getDomain(bookmark.url)}&sz=64`}
+                        class="size-6 rounded-full"
+                      />
                       {bookmark.name}
                     </a>
                   </div>