reduce 5kb by compressing media queries

packages/react/grep-icons.py

@@ -0,0 +1,40 @@
+import os
+import re
+from collections import defaultdict
+
+def extract_icons(directory):
+    icons = defaultdict(set)
+    pattern = r'i-(?:\w|-|_)+:(?:\w|-|_)+'
+
+    for root, _, files in os.walk(directory):
+        for file in files:
+            if file.endswith(('.js', '.jsx', '.ts', '.tsx')):
+                file_path = os.path.join(root, file)
+                with open(file_path, 'r', encoding='utf-8') as f:
+                    content = f.read()
+                    matches = re.findall(pattern, content)
+                    for match in matches:
+                        icons[match].add(file_path)
+
+    return icons
+
+# Usage
+src_directory = './src'  # Replace with your src directory path
+extracted_icons = extract_icons(src_directory)
+
+# Print the extracted icons and their associated files
+for icon, files in sorted(extracted_icons.items()):
+    print(f"Icon: {icon}")
+    for file in sorted(files):
+        print(f"  - {file}")
+    print()
+
+# Write the icons and their files to a text file
+with open('extracted_icons_with_files.txt', 'w') as f:
+    for icon, files in sorted(extracted_icons.items()):
+        f.write(f"Icon: {icon}\n")
+        for file in sorted(files):
+            f.write(f"  - {file}\n")
+        f.write("\n")
+
+print(f"Extracted {len(extracted_icons)} icons. Results saved to 'extracted_icons_with_files.txt'")

packages/react/package.json

@@ -122,6 +122,7 @@
     "lightningcss": "^1.25.1",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
+    "postcss-combine-media-query": "^1.0.1",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-input-range": "^5.0.0",

packages/react/postcss.config.js

@@ -5,5 +5,6 @@ export default {
     "postcss-import-ext-glob": {},
     "postcss-import": {},
     "postcss-input-range": {},
+    "postcss-combine-media-query": {},
   },
 };

packages/react/src/components/sidebar/sidebar.tsx

@@ -86,15 +86,16 @@ export function Sidebar() {
           <Link
             to="/settings/orgs"
             className={cn(
-              "w-full justify-start rounded-md px-4 py-2 text-center text-sm font-semibold tracking-tight text-base-9 transition-opacity hover:bg-base-3",
+              "w-full justify-start rounded-md px-4 py-2 text-center text-sm font-semibold tracking-tight text-base-9 transition-opacity duration-300 hover:bg-base-3",
               {
                 "visible opacity-70": fs,
-                "opacity-0 group-hover/sidebar:opacity-70": !fs,
+                "opacity-0 group-hover/sidebar:opacity-50 hover:!opacity-80":
+                  !fs,
               },
             )}
             style={{
               //dotted border:
-              border: "1px dashed var(--base-4)",
+              border: "2px dashed var(--base-4)",
             }}
           >
             Change Starred Orgs

packages/react/src/components/video/VideoCardCountdownToLive.tsx

@@ -7,6 +7,8 @@ import { localeAtom, preferredTimezonesAtom } from "@/store/i18n";
 import { VideoCardType } from "./VideoCard";
 import type { Dayjs } from "dayjs";
 
+let incr = 0;
+
 export function VideoCardCountdownToLive({
   video,
   className,
@@ -46,7 +48,7 @@ export function VideoCardCountdownToLive({
             </span>
           )}
           {formatTimeForTimezones(timestamp).map(({ timezone, time }) => (
-            <div key={id + timezone} className="">
+            <div key={id + timezone + incr++} className="">
               <div className="text-base-9">{timezone}:</div>
               <div className="text-center text-sm font-semibold text-base-11">
                 {time}

packages/react/src/lib/i18n.ts

@@ -153,6 +153,8 @@ i18n
   });
 
 i18n.on("languageChanged", async (lng: SupportedLangCodes) => {
+  console.log("Dayjs Language changing to", lng);
+  if (lng === "en") return;
   const localeCode = await loadDayJsLocale(lng);
 
   store.set(localeAtom, {