Merge branch '3.2' into main

thingbomb · Jan 12, 2025 · dc1fe8c · dc1fe8c
2 parents da30744 + 1563cc6
commit dc1fe8c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/apps/new-tab/public/_locales/en/messages.json b/apps/new-tab/public/_locales/en/messages.json
@@ -385,5 +385,8 @@
   },
   "clock_format": {
     "message": "Clock format"
+  },
+  "comic_sans": {
+    "message": "Comic Sans"
   }
 }
diff --git a/apps/new-tab/src/App.tsx b/apps/new-tab/src/App.tsx
@@ -308,39 +308,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")}
@@ -527,6 +527,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
@@ -117,9 +117,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",
           }
         )}
       >
@@ -332,7 +333,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={() => {
@@ -357,6 +358,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/src/Widgets.tsx b/apps/new-tab/src/Widgets.tsx
@@ -341,6 +341,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]">
@@ -363,8 +367,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>

diff --git 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)",