feat: Shared Links: Slug Support, UI Refactor, and Simplified Actions

mobile/lib/models/shared_link/shared_link.model.dart

@@ -14,6 +14,7 @@ class SharedLink {
   final String key;
   final bool showMetadata;
   final SharedLinkSource type;
+  final String? slug;
 
   const SharedLink({
     required this.id,
@@ -27,6 +28,7 @@ class SharedLink {
     required this.key,
     required this.showMetadata,
     required this.type,
+    required this.slug,
   });
 
   SharedLink copyWith({
@@ -41,6 +43,7 @@ class SharedLink {
     String? key,
     bool? showMetadata,
     SharedLinkSource? type,
+    String? slug,
   }) {
     return SharedLink(
       id: id ?? this.id,
@@ -54,6 +57,7 @@ class SharedLink {
       key: key ?? this.key,
       showMetadata: showMetadata ?? this.showMetadata,
       type: type ?? this.type,
+      slug: slug ?? this.slug,
     );
   }
 
@@ -66,6 +70,7 @@ class SharedLink {
       expiresAt = dto.expiresAt,
       key = dto.key,
       showMetadata = dto.showMetadata,
+      slug = dto.slug,
       type = dto.type == SharedLinkType.ALBUM ? SharedLinkSource.album : SharedLinkSource.individual,
       title = dto.type == SharedLinkType.ALBUM
           ? dto.album?.albumName.toUpperCase() ?? "UNKNOWN SHARE"
@@ -78,7 +83,7 @@ class SharedLink {
 
   @override
   String toString() =>
-      'SharedLink(id=$id, title=$title, thumbAssetId=$thumbAssetId, allowDownload=$allowDownload, allowUpload=$allowUpload, description=$description, password=$password, expiresAt=$expiresAt, key=$key, showMetadata=$showMetadata, type=$type)';
+      'SharedLink(id=$id, title=$title, thumbAssetId=$thumbAssetId, allowDownload=$allowDownload, allowUpload=$allowUpload, description=$description, password=$password, expiresAt=$expiresAt, key=$key, showMetadata=$showMetadata, type=$type, slug=$slug)';
 
   @override
   bool operator ==(Object other) =>
@@ -94,7 +99,8 @@ class SharedLink {
           other.expiresAt == expiresAt &&
           other.key == key &&
           other.showMetadata == showMetadata &&
-          other.type == type;
+          other.type == type &&
+          other.slug == slug;
 
   @override
   int get hashCode =>
@@ -108,5 +114,6 @@ class SharedLink {
       expiresAt.hashCode ^
       key.hashCode ^
       showMetadata.hashCode ^
-      type.hashCode;
+      type.hashCode ^
+      slug.hashCode;
 }

mobile/lib/pages/library/shared_link/shared_link.page.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/shared_link/shared_link.model.dart';
 import 'package:immich_mobile/providers/shared_link.provider.dart';
 import 'package:immich_mobile/widgets/shared_link/shared_link_item.dart';
@@ -26,71 +25,41 @@ class SharedLinkPage extends HookConsumerWidget {
     }, []);
 
     Widget buildNoShares() {
-      return Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Padding(
-            padding: const EdgeInsets.only(left: 16.0, top: 16.0),
-            child: const Text(
-              "shared_link_manage_links",
-              style: TextStyle(fontSize: 14, color: Colors.grey, fontWeight: FontWeight.bold),
-            ).tr(),
-          ),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16.0),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(vertical: 10),
-              child: const Text("you_dont_have_any_shared_links", style: TextStyle(fontSize: 14)).tr(),
-            ),
-          ),
-          Expanded(
-            child: Center(
-              child: Icon(Icons.link_off, size: 100, color: context.themeData.iconTheme.color?.withValues(alpha: 0.5)),
-            ),
-          ),
-        ],
+      return Center(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(Icons.link_off, size: 100, color: Theme.of(context).colorScheme.onSurface.withAlpha(128)),
+            const SizedBox(height: 20),
+            const Text("you_dont_have_any_shared_links", style: TextStyle(fontSize: 14)).tr(),
+          ],
+        ),
       );
     }
 
     Widget buildSharesList(List<SharedLink> links) {
-      return Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Padding(
-            padding: const EdgeInsets.only(left: 16.0, top: 16.0, bottom: 30.0),
-            child: Text(
-              "shared_link_manage_links",
-              style: context.textTheme.labelLarge?.copyWith(color: context.textTheme.labelLarge?.color?.withAlpha(200)),
-            ).tr(),
-          ),
-          Expanded(
-            child: LayoutBuilder(
-              builder: (context, constraints) {
-                if (constraints.maxWidth > 600) {
-                  // Two column
-                  return GridView.builder(
-                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: 2,
-                      mainAxisExtent: 180,
-                    ),
-                    itemCount: links.length,
-                    itemBuilder: (context, index) {
-                      return SharedLinkItem(links.elementAt(index));
-                    },
-                  );
-                }
-
-                // Single column
-                return ListView.builder(
-                  itemCount: links.length,
-                  itemBuilder: (context, index) {
-                    return SharedLinkItem(links.elementAt(index));
-                  },
-                );
-              },
-            ),
-          ),
-        ],
+      return LayoutBuilder(
+        builder: (context, constraints) => constraints.maxWidth > 600
+            ? GridView.builder(
+                key: const PageStorageKey('shared-links-grid'),
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 2,
+                  mainAxisExtent: 180,
+                  crossAxisSpacing: 12,
+                  mainAxisSpacing: 12,
+                ),
+                padding: const EdgeInsets.all(12),
+                itemCount: links.length,
+                itemBuilder: (context, index) => SharedLinkItem(links[index]),
+              )
+            : ListView.separated(
+                key: const PageStorageKey('shared-links-list'),
+                padding: const EdgeInsets.symmetric(vertical: 8),
+                itemCount: links.length,
+                itemBuilder: (context, index) => SharedLinkItem(links[index]),
+                separatorBuilder: (context, index) => const Divider(height: 1),
+              ),
       );
     }