From 2c5d5dc23437e288d7e6936e0337583dc8dbc782 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 31 Aug 2025 19:57:50 +0200
Subject: bunch of small improvements

---
 apps/web/src/components/editor/panel-base-view.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'apps/web/src/components/editor/panel-base-view.tsx')

diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
index ec01028c..bef4e62c 100644
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ b/apps/web/src/components/editor/panel-base-view.tsx
@@ -1,6 +1,7 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 
 interface PanelBaseViewProps {
   children?: React.ReactNode;
@@ -25,7 +26,7 @@ function ViewContent({
 }) {
   return (
     <ScrollArea className="flex-1">
-      <div className={`p-5 h-full ${className}`}>{children}</div>
+      <div className={cn("p-5", className)}>{children}</div>
     </ScrollArea>
   );
 }
@@ -40,7 +41,7 @@ export function PanelBaseView({
   ref,
 }: PanelBaseViewProps) {
   return (
-    <div className={`h-full flex flex-col ${className}`} ref={ref}>
+    <div className={cn("h-full flex flex-col", className)} ref={ref}>
       {!tabs || tabs.length === 0 ? (
         <ViewContent className={className}>{children}</ViewContent>
       ) : (
-- 
cgit v1.3.1


From 8eabbeae7c4c24bf8369deb336eaf38f4967f285 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 31 Aug 2025 21:51:31 +0200
Subject: more changes

---
 .../src/components/editor/media-panel/tabbar.tsx   | 52 +++++++++++++++++++++-
 .../editor/media-panel/views/settings.tsx          | 38 +++++++++++++---
 apps/web/src/components/editor/panel-base-view.tsx |  2 +-
 3 files changed, 84 insertions(+), 8 deletions(-)

(limited to 'apps/web/src/components/editor/panel-base-view.tsx')

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index 56437508..e2bfdff7 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -7,13 +7,45 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useEffect, useRef, useState } from "react";
 
 export function TabBar() {
   const { activeTab, setActiveTab } = useMediaPanelStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showTopFade, setShowTopFade] = useState(false);
+  const [showBottomFade, setShowBottomFade] = useState(false);
+
+  const checkScrollPosition = () => {
+    const element = scrollRef.current;
+    if (!element) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = element;
+    setShowTopFade(scrollTop > 0);
+    setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
+  };
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+
+    checkScrollPosition();
+    element.addEventListener("scroll", checkScrollPosition);
+    
+    const resizeObserver = new ResizeObserver(checkScrollPosition);
+    resizeObserver.observe(element);
+
+    return () => {
+      element.removeEventListener("scroll", checkScrollPosition);
+      resizeObserver.disconnect();
+    };
+  }, []);
 
   return (
-    <div className="flex">
-      <div className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full py-4">
+    <div className="flex relative">
+      <div 
+        ref={scrollRef}
+        className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-y-auto scrollbar-hidden relative w-full py-4"
+      >
         {(Object.keys(tabs) as Tab[]).map((tabKey) => {
           const tab = tabs[tabKey];
           return (
@@ -46,6 +78,22 @@ export function TabBar() {
           );
         })}
       </div>
+      
+      <FadeOverlay direction="top" show={showTopFade} />
+      <FadeOverlay direction="bottom" show={showBottomFade} />
     </div>
   );
 }
+
+function FadeOverlay({ direction, show }: { direction: "top" | "bottom", show: boolean }) {
+  return (
+    <div 
+      className={cn(
+        "absolute left-0 right-0 h-6 pointer-events-none z-[101] transition-opacity duration-200",
+        direction === "top" && show
+          ? "top-0 bg-gradient-to-b from-panel to-transparent" 
+          : "bottom-0 bg-gradient-to-t from-panel to-transparent"
+      )}
+    />
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index d2d21f36..be54a9c4 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -23,9 +23,11 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { colors } from "@/data/colors/solid";
 import { patternCraftGradients } from "@/data/colors/pattern-craft";
-import { PipetteIcon } from "lucide-react";
+import { PipetteIcon, PlusIcon } from "lucide-react";
 import { useMemo, memo, useCallback } from "react";
 import { syntaxUIGradients } from "@/data/colors/syntax-ui";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export function SettingsView() {
   return <ProjectSettingsTabs />;
@@ -39,14 +41,40 @@ function ProjectSettingsTabs() {
         {
           value: "project-info",
           label: "Project info",
-          content: <ProjectInfoView />,
+          content: (
+            <div className="p-5">
+              <ProjectInfoView />
+            </div>
+          ),
         },
         {
           value: "background",
           label: "Background",
-          content: <BackgroundView />,
+          content: (
+            <div className="flex flex-col justify-between h-full">
+              <div className="flex-1 p-5">
+                <BackgroundView />
+              </div>
+              <div className="flex flex-col sticky -bottom-0 bg-panel/85 backdrop-blur-lg">
+                <Separator />
+                <Button className="w-fit h-auto p-5 py-4 !bg-transparent shadow-none text-muted-foreground hover:text-foreground/85 text-xs">
+                  Custom background
+                  <PlusIcon />
+                </Button>
+              </div>
+
+              {/* Another UI, looks so beautiful i don't wanna remove it */}
+              {/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0">
+                <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full">
+                  <span className="text-sm">Custom</span>
+                  <PlusIcon className="" />
+                </Button>
+              </div> */}
+            </div>
+          ),
         },
       ]}
+      className="flex flex-col justify-between h-full p-0"
     />
   );
 }
@@ -258,7 +286,7 @@ function BackgroundView() {
   );
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 h-full">
       <PropertyGroup title="Blur" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
       </PropertyGroup>
@@ -278,7 +306,7 @@ function BackgroundView() {
         </div>
       </PropertyGroup>
 
-      <PropertyGroup title="Pattern Craft" defaultExpanded={false}>
+      <PropertyGroup title="Pattern craft" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">
           <BackgroundPreviews
             backgrounds={patternCraftGradients}
diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
index bef4e62c..4acadafb 100644
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ b/apps/web/src/components/editor/panel-base-view.tsx
@@ -69,7 +69,7 @@ export function PanelBaseView({
               value={tab.value}
               className="mt-0 flex-1 flex flex-col min-h-0"
             >
-              <ViewContent>{tab.content}</ViewContent>
+              <ViewContent className={className}>{tab.content}</ViewContent>
             </TabsContent>
           ))}
         </Tabs>
-- 
cgit v1.3.1


From c5480d307cd6b959c21aee4f1de7a2c3b9010d7d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 1 Sep 2025 23:01:15 +0200
Subject: refactor: make stickers use panel base view

---
 .../editor/media-panel/views/stickers.tsx          | 97 +++++++++-------------
 apps/web/src/components/editor/panel-base-view.tsx |  6 ++
 2 files changed, 43 insertions(+), 60 deletions(-)

(limited to 'apps/web/src/components/editor/panel-base-view.tsx')

diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx
index c30acee0..b6c64bd0 100644
--- a/apps/web/src/components/editor/media-panel/views/stickers.tsx
+++ b/apps/web/src/components/editor/media-panel/views/stickers.tsx
@@ -20,8 +20,7 @@ import {
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Separator } from "@/components/ui/separator";
+import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
 import {
   Tooltip,
   TooltipContent,
@@ -48,63 +47,41 @@ export function StickersView() {
   const { selectedCategory, setSelectedCategory } = useStickersStore();
 
   return (
-    <div className="h-full flex flex-col">
-      <Tabs
-        value={selectedCategory}
-        onValueChange={(v) => {
-          if (["all", "general", "brands", "emoji"].includes(v)) {
-            setSelectedCategory(v as StickerCategory);
-          }
-        }}
-        className="flex flex-col h-full"
-      >
-        <div className="px-3 pt-4 pb-0">
-          <TabsList>
-            <TabsTrigger value="all" className="gap-1">
-              <Grid3X3 className="h-3 w-3" />
-              All
-            </TabsTrigger>
-            <TabsTrigger value="general" className="gap-1">
-              <Sparkles className="h-3 w-3" />
-              Icons
-            </TabsTrigger>
-            <TabsTrigger value="brands" className="gap-1">
-              <Hash className="h-3 w-3" />
-              Brands
-            </TabsTrigger>
-            <TabsTrigger value="emoji" className="gap-1">
-              <Smile className="h-3 w-3" />
-              Emoji
-            </TabsTrigger>
-          </TabsList>
-        </div>
-        <Separator className="my-4" />
-        <TabsContent
-          value="all"
-          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <StickersContentView category="all" />
-        </TabsContent>
-        <TabsContent
-          value="general"
-          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <StickersContentView category="general" />
-        </TabsContent>
-        <TabsContent
-          value="brands"
-          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <StickersContentView category="brands" />
-        </TabsContent>
-        <TabsContent
-          value="emoji"
-          className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
-        >
-          <StickersContentView category="emoji" />
-        </TabsContent>
-      </Tabs>
-    </div>
+    <BaseView
+      value={selectedCategory}
+      onValueChange={(v) => {
+        if (["all", "general", "brands", "emoji"].includes(v)) {
+          setSelectedCategory(v as StickerCategory);
+        }
+      }}
+      tabs={[
+        {
+          value: "all",
+          label: "All",
+          icon: <Grid3X3 className="h-3 w-3" />,
+          content: <StickersContentView category="all" />,
+        },
+        {
+          value: "general",
+          label: "Icons",
+          icon: <Sparkles className="h-3 w-3" />,
+          content: <StickersContentView category="general" />,
+        },
+        {
+          value: "brands",
+          label: "Brands",
+          icon: <Hash className="h-3 w-3" />,
+          content: <StickersContentView category="brands" />,
+        },
+        {
+          value: "emoji",
+          label: "Emoji",
+          icon: <Smile className="h-3 w-3" />,
+          content: <StickersContentView category="emoji" />,
+        },
+      ]}
+      className="flex flex-col h-full p-0 overflow-hidden"
+    />
   );
 }
 
@@ -361,7 +338,7 @@ function StickersContentView({ category }: { category: StickerCategory }) {
   }, [isInCollection]);
 
   return (
-    <div className="flex flex-col gap-5 mt-1 h-full">
+    <div className="flex flex-col gap-5 mt-1 h-full p-4">
       <div className="space-y-3">
         <InputWithBack
           isExpanded={isInCollection}
diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
index 4acadafb..6e92c616 100644
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ b/apps/web/src/components/editor/panel-base-view.tsx
@@ -11,6 +11,7 @@ interface PanelBaseViewProps {
   tabs?: {
     value: string;
     label: string;
+    icon?: React.ReactNode;
     content: React.ReactNode;
   }[];
   className?: string;
@@ -56,6 +57,11 @@ export function PanelBaseView({
               <TabsList>
                 {tabs.map((tab) => (
                   <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.icon ? (
+                      <span className="inline-flex items-center mr-1">
+                        {tab.icon}
+                      </span>
+                    ) : null}
                     {tab.label}
                   </TabsTrigger>
                 ))}
-- 
cgit v1.3.1