fixed git commit hash parsing and no more eslint warnings

next.config.ts

@@ -1,14 +1,8 @@
 import type { NextConfig } from "next";
-import { version } from "./package.json";
 
 const nextConfig: NextConfig = {
     output: "standalone",
-    generateBuildId: () => (process.env.GIT_COMMIT || null),
+    generateBuildId: () => (process.env.NEXT_PUBLIC_GIT_COMMIT ? process.env.NEXT_PUBLIC_GIT_COMMIT : null)
-    env: {
-        BUILD_ID: process.env.GIT_COMMIT,
-        VERSION: version
-    }
-    
 };
 
 export default nextConfig;

src/Dockerfile

@@ -39,8 +39,12 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN \
-    GIT_COMMIT=$(git rev-parse HEAD); \
+    NEXT_PUBLIC_GIT_COMMIT=$(git log --pretty=format:"%H" -n 1); \
-    echo $GIT_COMMIT; \
+    echo GIT_COMMIT: $NEXT_PUBLIC_GIT_COMMIT; \
+    echo "NEXT_PUBLIC_GIT_COMMIT=${NEXT_PUBLIC_GIT_COMMIT}" >> .env; \
+    NEXT_PUBLIC_PACKAGE_VERSION="$(node -pe "require('./package.json')['version']")"; \
+    echo PACKAGE_VERSION: $NEXT_PUBLIC_PACKAGE_VERSION; \
+    echo "NEXT_PUBLIC_PACKAGE_VERSION=${NEXT_PUBLIC_PACKAGE_VERSION}" >> .env; \
     if [ -f yarn.lock ]; then yarn run build; \
     elif [ -f package-lock.json ]; then npm run build; \
     elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \

src/app/globals.css

@@ -69,7 +69,7 @@ body {
 
 main {
     width: 100%;
-    height: max(100vh, 100%);
+    height: 100%;
 }
 
 .dark body {
@@ -153,8 +153,4 @@ main {
     body {
         @apply bg-background text-foreground;
     }
-}
-
-@utility h-safe-area-inset-top {
-    height: env(safe-area-inset-top);
 }

src/app/page.tsx

@@ -1,11 +1,10 @@
 "use client";
-import { SidebarTrigger } from "@/components/ui/sidebar";
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from "react";
-import { createContext, Dispatch, MouseEventHandler, ReactNode, SetStateAction, useContext, useEffect, useState } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import { addProject, db, deleteProject } from "@/lib/db";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { ALargeSmallIcon, ArrowDownAZIcon, ArrowDownIcon, ArrowUpAZIcon, ArrowUpIcon, CalendarArrowDownIcon, CalendarArrowUpIcon, CalendarIcon, ClockArrowDownIcon, ClockArrowUpIcon, ClockIcon, CopyIcon, EditIcon, EllipsisIcon, Grid2X2, Grid2X2CheckIcon, Grid2x2X, Grid2X2XIcon, Grid2x2XIcon, InfoIcon, ListCheckIcon, PencilIcon, PlusIcon, TrashIcon } from "lucide-react";
+import { ALargeSmallIcon, ArrowDownIcon, ArrowUpIcon, CalendarIcon, ClockIcon, CopyIcon, EditIcon, EllipsisIcon, Grid2X2CheckIcon, Grid2X2XIcon, InfoIcon, PencilIcon, PlusIcon, TrashIcon } from "lucide-react";
 import { Toggle } from "@/components/ui/toggle";
 import Search from "@/components/search";
 import { useIsMobile } from "@/hooks/use-mobile";
@@ -32,7 +31,6 @@ import { Separator } from "@/components/ui/separator";
 import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
 import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
 import ScrollFadingTitle from "@/components/scroll-fading-title";
-import { fa } from "zod/v4/locales";
 import AscendingCard from "@/components/ascending-card";
 
 type SortingType = "byCreationDate"
@@ -78,7 +76,7 @@ const SortingTypeMenuItem = ({
     currentSortingType: SortingType
     setSortingType: Dispatch<SetStateAction<SortingType>>,
 }) => (
-    <DropdownMenuCheckboxItem checked={currentSortingType == sortingType} onCheckedChange={(_) => setSortingType(sortingType)}>
+    <DropdownMenuCheckboxItem checked={currentSortingType == sortingType} onCheckedChange={() => setSortingType(sortingType)}>
         <SortingTypeIcon sortingType={sortingType} /> {sortingTypeToString(sortingType)}
     </DropdownMenuCheckboxItem>
 );

src/app/settings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { ChartPieIcon, ChevronRightIcon, InfoIcon } from "lucide-react";
+import { ChartPieIcon, ChevronRightIcon } from "lucide-react";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode,  } from "react";
 import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
 import ScrollFadingTitle from "@/components/scroll-fading-title";
 import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
@@ -32,25 +32,24 @@ export default function Settings(): ReactNode {
             </div>
             <div className="flex flex-col justify-center items-center">
                 <WideContainer>
-                    <div className="flex flex-col gap-1 md:gap-2 mt-1 md:mt-2 justify-center">
+                    <div className="flex flex-col gap-2 mt-2 justify-center">
                         <Link href="/settings/storage">
-                            <AscendingCard className="flex flex-row justify-between gap-2 p-4">
+                            <AscendingCard className="flex flex-row justify-between items-center gap-2 p-4">
                                 <div className="flex flex-row justify-between items-center gap-3">
                                     <div className="flex items-center justify-center">
                                         <ChartPieIcon />
                                     </div>
                                     <div className="flex flex-col items-start">
                                         <h3 className="font-semibold break-keep text-lg sm:text-xl">Storage</h3>
-                                        <p className="text-sm text-muted-foreground">Memory usage, media, cache etc.</p>
+                                        <p className="text-sm text-muted-foreground leading-none">Memory usage, media, cache etc.</p>
                                     </div>
                                 </div>
                                 <ChevronRightIcon />
                             </AscendingCard>
                         </Link>
                         <Link className="text-sm text-muted-foreground flex justify-center" target="_blank" href={
-                            process.env.NODE_ENV == "development"
+                            `https://github.com/ClipFusion-org/clipfusion/commit/${getBuildID()}`
-                                ? "https://github.com/ClipFusion-org/clipfusion/commit/main"
+                        }>
-                                : `https://github.com/ClipFusion-org/clipfusion/commit/${process.env.BUILD_ID}`}>
                             {getVersion()} ({getBuildID()})
                         </Link>
                     </div>

src/app/settings/storage/page.tsx

@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import WideContainer from "@/components/wide-container";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
 import { ArrowLeftIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";

src/components/scroll-fading-title/ScrollFadingTitle.tsx

@@ -1,5 +1,4 @@
-import { cn } from "@/lib/utils";
+import { ComponentProps, useEffect, useRef } from "react";
-import { ComponentProps, useEffect, useRef, useState } from "react";
 
 const easeFade = (x: number) => (
     x === 0 ? 0 : Math.pow(2, 10 * x - 10)

src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { ComponentProps, useEffect, useState } from "react";
+import { ComponentProps, useEffect, useRef } from "react";
 
 const easeSlide = (x: number) => (
     1 - Math.pow(1 - x, 3)
@@ -16,13 +16,34 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
 }) => {
     const adjustWidth = props.adjustWidth === undefined ? 12 : +props.adjustWidth;
     const isMobile = useIsMobile();
-    const [slideAmount, setSlideAmount] = useState(0);
+    const ref = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        const handleScroll = () =>
+        let lastKnownScrollPosition = 0;
-            setSlideAmount(easeSlide(
+        let ticking = false;
-                Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
+
-            ));
+        const updateAdjustable = (scrollPos: number) => {
+            if (!ref.current) return;
+            const slideAmount = easeSlide(
+                Math.max(0, Math.min(1, scrollPos / (window.innerHeight / 20))));
+
+            ref.current.style.transform = `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`;
+            ref.current.style.marginTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
+            ref.current.style.width = `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`;
+        };
+
+        const handleScroll = () => {
+            lastKnownScrollPosition = window.scrollY;
+
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    updateAdjustable(lastKnownScrollPosition);
+                    ticking = false;
+                });
+
+                ticking = true;
+            }
+        }
 
         handleScroll();
         window.addEventListener('scroll', handleScroll, { passive: true });
@@ -30,11 +51,7 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, [isMobile]);
+    }, [isMobile, ref]);
 
-    return <div style={{
+    return <div ref={ref} className={props.className}>{props.children}</div>;
-        transform: `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`,
-        marginTop: `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`,
-        width: `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`
-    }} className={props.className}>{props.children}</div>;
 }

src/lib/build.ts

@@ -1,7 +1,7 @@
 export const getBuildID = () => (
-    process.env.NODE_ENV == "development" ? "latest commit" : process.env.BUILD_ID
+    process.env.NODE_ENV == "development" ? "main" : process.env.NEXT_PUBLIC_GIT_COMMIT
 );
 
 export const getVersion = () => (
-    process.env.NODE_ENV == "development" ? "development" : process.env.VERSION
+    process.env.NODE_ENV == "development" ? "development" : process.env.NEXT_PUBLIC_PACKAGE_VERSION
 );