move all components to components dir

src/app/[orgId]/settings/share-links/AccessTokenUsage.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Check, Copy, Info, InfoIcon } from "lucide-react";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import CopyToClipboard from "@app/components/CopyToClipboard";
-import CopyTextBox from "@app/components/CopyTextBox";
-import { useTranslations } from "next-intl";
-
-interface AccessTokenSectionProps {
-    token: string;
-    tokenId: string;
-    resourceUrl: string;
-}
-
-export default function AccessTokenSection({
-    token,
-    tokenId,
-    resourceUrl
-}: AccessTokenSectionProps) {
-    const { env } = useEnvContext();
-
-    const [copied, setCopied] = useState<string | null>(null);
-
-    const copyToClipboard = (text: string, type: string) => {
-        navigator.clipboard.writeText(text);
-        setCopied(type);
-        setTimeout(() => setCopied(null), 2000);
-    };
-
-    const t = useTranslations();
-
-    return (
-        <>
-            <div className="flex items-start space-x-2">
-                <p className="text-sm text-muted-foreground">
-                    {t('shareTokenDescription')}
-                </p>
-            </div>
-
-            <Tabs defaultValue="token" className="w-full mt-4">
-                <TabsList className="grid grid-cols-2">
-                    <TabsTrigger value="token">{t('accessToken')}</TabsTrigger>
-                    <TabsTrigger value="usage">{t('usageExamples')}</TabsTrigger>
-                </TabsList>
-
-                <TabsContent value="token" className="space-y-4">
-                    <div className="space-y-1">
-                        <div className="font-bold">{t('tokenId')}</div>
-                        <CopyToClipboard text={tokenId} isLink={false} />
-                    </div>
-
-                    <div className="space-y-1">
-                        <div className="font-bold">{t('token')}</div>
-                        <CopyToClipboard text={token} isLink={false} />
-                    </div>
-                </TabsContent>
-
-                <TabsContent value="usage" className="space-y-4">
-                    <div className="space-y-2">
-                        <h3 className="text-sm font-medium">{t('requestHeades')}</h3>
-                        <CopyTextBox
-                            text={`${env.server.resourceAccessTokenHeadersId}: ${tokenId}
-${env.server.resourceAccessTokenHeadersToken}: ${token}`}
-                        />
-                    </div>
-
-                    <div className="space-y-2">
-                        <h3 className="text-sm font-medium">{t('queryParameter')}</h3>
-                        <CopyTextBox
-                            text={`${resourceUrl}?${env.server.resourceAccessTokenParam}=${tokenId}.${token}`}
-                        />
-                    </div>
-
-                    <Alert variant="neutral">
-                        <InfoIcon className="h-4 w-4" />
-                        <AlertTitle className="font-semibold">
-                            {t('importantNote')}
-                        </AlertTitle>
-                        <AlertDescription>
-                            {t('shareImportantDescription')}
-                        </AlertDescription>
-                    </Alert>
-                </TabsContent>
-            </Tabs>
-
-            <div className="text-sm text-muted-foreground mt-4">
-                {t('shareTokenSecurety')}
-            </div>
-        </>
-    );
-}

src/app/[orgId]/settings/share-links/CreateShareLinkForm.tsx

@@ -58,14 +58,14 @@ import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
 import { constructShareLink } from "@app/lib/shareLinks";
-import { ShareLinkRow } from "./ShareLinksTable";
+import { ShareLinkRow } from "@app/components/ShareLinksTable";
 import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
 import {
     Collapsible,
     CollapsibleContent,
     CollapsibleTrigger
 } from "@app/components/ui/collapsible";
-import AccessTokenSection from "./AccessTokenUsage";
+import AccessTokenSection from "@app/components/AccessTokenUsage";
 import { useTranslations } from "next-intl";
 import { toUnicode } from 'punycode';
 

src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import {
-    ColumnDef,
-} from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
-import { useTranslations } from "next-intl";
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    createShareLink?: () => void;
-}
-
-export function ShareLinksDataTable<TData, TValue>({
-    columns,
-    data,
-    createShareLink
-}: DataTableProps<TData, TValue>) {
-
-    const t = useTranslations();
-
-    return (
-        <DataTable
-            columns={columns}
-            data={data}
-            persistPageSize="shareLinks-table"
-            title={t('shareLinks')}
-            searchPlaceholder={t('shareSearch')}
-            searchColumn="name"
-            onAdd={createShareLink}
-            addButtonText={t('shareCreate')}
-        />
-    );
-}

src/app/[orgId]/settings/share-links/ShareLinksSplash.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { Link, X, Clock, Share, ArrowRight, Lock } from "lucide-react"; // Replace with actual imports
-import { Card, CardContent } from "@app/components/ui/card";
-import { Button } from "@app/components/ui/button";
-import { useTranslations } from "next-intl";
-
-export const ShareableLinksSplash = () => {
-    const [isDismissed, setIsDismissed] = useState(false);
-
-    const key = "share-links-splash-dismissed";
-
-    useEffect(() => {
-        const dismissed = localStorage.getItem(key);
-        if (dismissed === "true") {
-            setIsDismissed(true);
-        }
-    }, []);
-
-    const handleDismiss = () => {
-        setIsDismissed(true);
-        localStorage.setItem(key, "true");
-    };
-
-    const t = useTranslations();
-
-    if (isDismissed) {
-        return null;
-    }
-
-    return (
-        <Card className="w-full mx-auto overflow-hidden mb-8 hidden md:block relative">
-            <button
-                onClick={handleDismiss}
-                className="absolute top-2 right-2 p-2"
-                aria-label={t('dismiss')}
-            >
-                <X className="w-5 h-5" />
-            </button>
-            <CardContent className="grid gap-6 p-6">
-                <div className="space-y-4">
-                    <h3 className="text-xl font-semibold flex items-center gap-2">
-                        <Link className="text-blue-500" />
-                        {t('share')}
-                    </h3>
-                    <p className="text-sm">
-                        {t('shareDescription2')}
-                    </p>
-                    <ul className="text-sm text-muted-foreground space-y-2">
-                        <li className="flex items-center gap-2">
-                            <Share className="text-green-500 w-4 h-4" />
-                            {t('shareEasyCreate')}
-                        </li>
-                        <li className="flex items-center gap-2">
-                            <Clock className="text-yellow-500 w-4 h-4" />
-                            {t('shareConfigurableExpirationDuration')}
-                        </li>
-                        <li className="flex items-center gap-2">
-                            <Lock className="text-red-500 w-4 h-4" />
-                            {t('shareSecureAndRevocable')}
-                        </li>
-                    </ul>
-                </div>
-            </CardContent>
-        </Card>
-    );
-};
-
-export default ShareableLinksSplash;

src/app/[orgId]/settings/share-links/ShareLinksTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ShareLinksDataTable } from "./ShareLinksDataTable";
+import { ShareLinksDataTable } from "@app/components/ShareLinksDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -31,7 +31,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { ArrayElement } from "@server/types/ArrayElement";
 import { ListAccessTokensResponse } from "@server/routers/accessToken";
 import moment from "moment";
-import CreateShareLinkForm from "./CreateShareLinkForm";
+import CreateShareLinkForm from "@app/components/CreateShareLinkForm";
 import { constructShareLink } from "@app/lib/shareLinks";
 import { useTranslations } from "next-intl";
 

src/app/[orgId]/settings/share-links/page.tsx

@@ -7,8 +7,8 @@ import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListAccessTokensResponse } from "@server/routers/accessToken";
-import ShareLinksTable, { ShareLinkRow } from "./ShareLinksTable";
-import ShareableLinksSplash from "./ShareLinksSplash";
+import ShareLinksTable, { ShareLinkRow } from "../../../../components/ShareLinksTable";
+import ShareableLinksSplash from "../../../../components/ShareLinksSplash";
 import { getTranslations } from "next-intl/server";
 
 type ShareLinksPageProps = {