linkwarden · NightWatcher314 · Jan 14, 2025
diff --git a/components/Divider.tsx b/components/Divider.tsx
@@ -0,0 +1,7 @@
+export default function Divider() {
+  return (
+    <div className="flex items-center py-2">
+      <div className="flex-1 border-t border-base-content/20"></div>
+    </div>
+  );
+} 
diff --git a/components/LinkViews/GroupedLinks.tsx b/components/LinkViews/GroupedLinks.tsx
@@ -0,0 +1,68 @@
+import { GroupBy, LinkIncludingShortenedCollectionAndTags, Sort, SortToGroupMap } from "@/types/global";
+import { useMemo } from "react";
+import { useTranslation } from "next-i18next";
+
+function getGroupKeyFromLink(link: LinkIncludingShortenedCollectionAndTags, groupBy: GroupBy) {
+    switch (groupBy) {
+        case GroupBy.Date: {
+            const date = new Date(link.createdAt as string);
+            const year = date.getFullYear();
+            const month = date.getMonth() + 1;
+            const day = date.getDate();
+            return `${year}.${month}.${day}`;
+        }
+        case GroupBy.Name:
+            return link.name.charAt(0).toUpperCase();
+        case GroupBy.Description:
+            return link.description ? link.description.charAt(0).toUpperCase() : '#';
+        default:
+            return '';
+    }
+}
+
+export default function GroupedLinks({
+    links,
+    sortBy,
+    enableGrouping,
+    renderLinks
+}: {
+    links?: LinkIncludingShortenedCollectionAndTags[];
+    sortBy: Sort;
+    enableGrouping: boolean;
+    renderLinks: (groupLinks: LinkIncludingShortenedCollectionAndTags[]) => React.ReactNode;
+}) {
+    const { t } = useTranslation();
+    const groupedLinks = useMemo(() => {
+        if (!links || !enableGrouping) {
+            return { "": links || [] };
+        }
+
+        const groupBy = SortToGroupMap[sortBy] || GroupBy.None;
+        if (groupBy === GroupBy.None) {
+            return { "": links };
+        }
+
+        return links.reduce((groups: { [key: string]: LinkIncludingShortenedCollectionAndTags[] }, link) => {
+            const groupKey = getGroupKeyFromLink(link, groupBy);
+
+            if (!groups[groupKey]) {
+                groups[groupKey] = [];
+            }
+            groups[groupKey].push(link);
+            return groups;
+        }, {});
+    }, [links, sortBy, enableGrouping]);
+
+    return (
+        <div className="flex flex-col gap-8">
+            {Object.entries(groupedLinks).map(([groupName, groupLinks]) => (
+                <div key={groupName} className="space-y-4">
+                    {groupName && enableGrouping && (
+                        <h2 className="text-xl font-semibold text-neutral">{groupName}</h2>
+                    )}
+                    {renderLinks(groupLinks)}
+                </div>
+            ))}
+        </div>
+    );
+} 
diff --git a/components/LinkViews/LinkComponents/LinkList.tsx b/components/LinkViews/LinkComponents/LinkList.tsx
@@ -103,9 +103,8 @@ export default function LinkCardCompact({ link, editMode }: Props) {
   return (
     <>
       <div
-        className={`${selectedStyle} rounded-md border relative group items-center flex ${
-          !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
-        } duration-200`}
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${!isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
+          } duration-200`}
          =>
           selectable
             ? handleCheckboxClick(link)
@@ -129,7 +128,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
           <div className="w-[calc(100%-56px)] ml-2">
             {show.name && (
               <div className="flex gap-1 mr-20">
-                <p className="truncate text-primary">
+                <p className="text-primary">
                   {unescapeString(link.name)}
                 </p>
                 {show.preserved_formats &&

diff --git a/components/LinkViews/Links.tsx b/components/LinkViews/Links.tsx
@@ -2,6 +2,7 @@ import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import {
   LinkIncludingShortenedCollectionAndTags,
   ViewMode,
+  Sort,
 } from "@/types/global";
 import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
@@ -12,6 +13,7 @@ import tailwindConfig from "../../tailwind.config.js";
 import { useMemo } from "react";
 import LinkList from "@/components/LinkViews/LinkComponents/LinkList";
 import useLocalSettingsStore from "@/store/localSettings";
+import GroupedLinks from "@/components/LinkViews/GroupedLinks";
 
 export function CardView({
   links,
@@ -288,48 +290,59 @@ export default function Links({
   useData?: any;
 }) {
   const { ref, inView } = useInView();
+  const { settings } = useLocalSettingsStore();
 
   useEffect(() => {
     if (inView && useData?.fetchNextPage && useData?.hasNextPage) {
       useData.fetchNextPage();
     }
   }, [useData, inView]);
 
-  if (layout === ViewMode.List) {
-    return (
-      <ListView
-        links={links}
-        editMode={editMode}
-        isLoading={useData?.isLoading}
-        placeholders={placeholderCountToArray(placeholderCount)}
-        hasNextPage={useData?.hasNextPage}
-        placeHolderRef={ref}
-      />
-    );
-  } else if (layout === ViewMode.Masonry) {
-    return (
-      <MasonryView
-        links={links}
-        editMode={editMode}
-        isLoading={useData?.isLoading}
-        placeholders={placeholderCountToArray(placeholderCount)}
-        hasNextPage={useData?.hasNextPage}
-        placeHolderRef={ref}
-      />
-    );
-  } else {
-    // Default to card view
-    return (
-      <CardView
-        links={links}
-        editMode={editMode}
-        isLoading={useData?.isLoading}
-        placeholders={placeholderCountToArray(placeholderCount)}
-        hasNextPage={useData?.hasNextPage}
-        placeHolderRef={ref}
-      />
-    );
-  }
+  const renderView = (groupLinks: LinkIncludingShortenedCollectionAndTags[]) => {
+    if (layout === ViewMode.List) {
+      return (
+        <ListView
+          links={groupLinks}
+          editMode={editMode}
+          isLoading={useData?.isLoading}
+          placeholders={placeholderCountToArray(placeholderCount)}
+          hasNextPage={useData?.hasNextPage}
+          placeHolderRef={ref}
+        />
+      );
+    } else if (layout === ViewMode.Masonry) {
+      return (
+        <MasonryView
+          links={groupLinks}
+          editMode={editMode}
+          isLoading={useData?.isLoading}
+          placeholders={placeholderCountToArray(placeholderCount)}
+          hasNextPage={useData?.hasNextPage}
+          placeHolderRef={ref}
+        />
+      );
+    } else {
+      return (
+        <CardView
+          links={groupLinks}
+          editMode={editMode}
+          isLoading={useData?.isLoading}
+          placeholders={placeholderCountToArray(placeholderCount)}
+          hasNextPage={useData?.hasNextPage}
+          placeHolderRef={ref}
+        />
+      );
+    }
+  };
+
+  return (
+    <GroupedLinks
+      links={links}
+      sortBy={settings.sortBy || Sort.DateNewestFirst}
+      enableGrouping={settings.enableGrouping}
+      renderLinks={renderView}
+    />
+  );
 }
 
 const placeholderCountToArray = (num?: number) =>

diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
@@ -13,7 +13,7 @@ type Props = {
 };
 
 export default function SortDropdown({ sortBy, setSort, t }: Props) {
-  const { updateSettings } = useLocalSettingsStore();
+  const { settings, updateSettings } = useLocalSettingsStore();
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -31,6 +31,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
+
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -153,6 +154,21 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
             </span>
           </label>
         </li>
+        <div className="divider m-0"></div>
+        <li>
+          <label className="label cursor-pointer flex justify-start">
+            <input
+              type="checkbox"
+              className="toggle toggle-primary toggle-sm"
+              checked={settings.enableGrouping}
+               => {
+                updateSettings({ enableGrouping: e.target.checked });
+              }}
+            />
+            <span className="truncate label-text whitespace-nowrap">{t("enable_grouping")}</span>
+          </label>
+        </li>
+
       </ul>
     </div>
   );

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -458,5 +458,6 @@
   "not_found_404": "404 - Not Found",
   "collection_publicly_shared": "This collection is being shared publicly.",
   "search_for_links": "Search for Links",
-  "search_query_invalid_symbol": "The search query should not contain '%'."
+  "search_query_invalid_symbol": "The search query should not contain '%'.",
+  "enable_grouping": "Enable Grouping"
 }
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
@@ -370,5 +370,6 @@
   "demo_title": "仅限演示",
   "demo_desc": "这只是 Linkwarden 的演示实例，禁止上传文件。",
   "demo_desc_2": "如果你想尝试完整版，你可以注册免费试用：",
-  "demo_button": "以演示用户登录"
+  "demo_button": "以演示用户登录",
+  "enable_grouping": "启用分组"
 }
diff --git a/store/localSettings.ts b/store/localSettings.ts
@@ -18,6 +18,7 @@ type LocalSettings = {
   };
   columns: number;
   sortBy?: Sort;
+  enableGrouping: boolean;
 };
 
 type LocalSettingsStore = {
@@ -44,6 +45,7 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
     },
     columns: 0,
     sortBy: Sort.DateNewestFirst,
+    enableGrouping: true,
   },
   updateSettings: (newSettings) => {
     const { theme, viewMode, color, sortBy, show, columns } = newSettings;
@@ -126,6 +128,7 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
         show,
         columns,
         sortBy: useLocalSettingsStore.getState().settings.sortBy,
+        enableGrouping: true,
       },
     });
 

diff --git a/types/global.ts b/types/global.ts
@@ -158,3 +158,20 @@ export enum TokenExpiry {
   threeMonths,
   never,
 }
+
+export enum GroupBy {
+  None,
+  Date,
+  Name,
+  Description
+}
+
+// 将Sort和GroupBy关联起来
+export const SortToGroupMap: { [key in Sort]?: GroupBy } = {
+  [Sort.DateNewestFirst]: GroupBy.Date,
+  [Sort.DateOldestFirst]: GroupBy.Date,
+  [Sort.NameAZ]: GroupBy.Name,
+  [Sort.NameZA]: GroupBy.Name,
+  [Sort.DescriptionAZ]: GroupBy.Description,
+  [Sort.DescriptionZA]: GroupBy.Description,
+};