chore: update shortcut details

frontend/web/src/components/AnalyticsView.tsx

@@ -34,6 +34,12 @@ const AnalyticsView: React.FC<Props> = (props: Props) => {
                   <span className="py-2 pr-2 text-right font-semibold text-sm text-gray-500">{t("analytics.visitors")}</span>
                 </div>
                 <div className="w-full divide-y divide-gray-200 dark:divide-zinc-800">
+                  {analytics.referenceData.length === 0 && (
+                    <div className="w-full flex flex-row justify-center items-center py-6 text-gray-400">
+                      <Icon.PackageOpen className="w-6 h-auto" />
+                      <p className="ml-2">No data found.</p>
+                    </div>
+                  )}
                   {analytics.referenceData.map((reference) => (
                     <div key={reference.name} className="w-full flex flex-row justify-between items-center">
                       <span className="whitespace-nowrap py-2 px-2 text-sm truncate text-gray-900 dark:text-gray-500">
@@ -89,6 +95,12 @@ const AnalyticsView: React.FC<Props> = (props: Props) => {
                     <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">{t("analytics.visitors")}</span>
                   </div>
                   <div className="w-full divide-y divide-gray-200 dark:divide-zinc-800">
+                    {analytics.browserData.length === 0 && (
+                      <div className="w-full flex flex-row justify-center items-center py-6 text-gray-400">
+                        <Icon.PackageOpen className="w-6 h-auto" />
+                        <p className="ml-2">No data found.</p>
+                      </div>
+                    )}
                     {analytics.browserData.map((reference) => (
                       <div key={reference.name} className="w-full flex flex-row justify-between items-center">
                         <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate dark:text-gray-500">
@@ -106,6 +118,12 @@ const AnalyticsView: React.FC<Props> = (props: Props) => {
                     <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">{t("analytics.visitors")}</span>
                   </div>
                   <div className="w-full divide-y divide-gray-200">
+                    {analytics.deviceData.length === 0 && (
+                      <div className="w-full flex flex-row justify-center items-center py-6 text-gray-400">
+                        <Icon.PackageOpen className="w-6 h-auto" />
+                        <p className="ml-2">No data found.</p>
+                      </div>
+                    )}
                     {analytics.deviceData.map((device) => (
                       <div key={device.name} className="w-full flex flex-row justify-between items-center">
                         <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{device.name || "Unknown"}</span>

frontend/web/src/components/CollectionView.tsx

@@ -10,7 +10,6 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useAppSelector } from "@/stores";
 import useCollectionStore from "@/stores/v1/collection";
 import { Collection } from "@/types/proto/api/v2/collection_service";
-import { Visibility } from "@/types/proto/api/v2/common";
 import { showCommonDialog } from "./Alert";
 import CreateCollectionDialog from "./CreateCollectionDialog";
 import Icon from "./Icon";
@@ -65,11 +64,9 @@ const CollectionView = (props: Props) => {
             <p className="text-sm text-gray-500">{collection.description}</p>
           </div>
           <div className="flex flex-row justify-end items-center shrink-0">
-            {collection.visibility !== Visibility.PRIVATE && (
-              <Link className="w-full text-gray-400 cursor-pointer hover:text-gray-500" to={`/c/${collection.name}`}>
-                <Icon.Share className="w-4 h-auto mr-2" />
-              </Link>
-            )}
+            <Link className="w-full text-gray-400 cursor-pointer hover:text-gray-500" to={`/c/${collection.name}`}>
+              <Icon.Share className="w-4 h-auto mr-2" />
+            </Link>
             <Dropdown
               actionsClassName="!w-28 dark:text-gray-500"
               actions={

frontend/web/src/components/ShortcutView.tsx

@@ -31,7 +31,7 @@ const ShortcutView = (props: Props) => {
           <Icon.CircleSlash className="w-full h-auto text-gray-400" />
         )}
       </div>
-      <div className="ml-1 w-full truncate">
+      <div className="ml-2 w-full truncate">
         {shortcut.title ? (
           <>
             <span className="dark:text-gray-400">{shortcut.title}</span>
@@ -51,11 +51,12 @@ const ShortcutView = (props: Props) => {
         )}
         to={`/s/${shortcut.name}`}
         target="_blank"
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon.ArrowUpRight className="w-4 h-auto text-gray-400 shrink-0" />
       </Link>
       {showActions && (
-        <div className="ml-1 flex flex-row justify-end items-center shrink-0">
+        <div className="ml-1 flex flex-row justify-end items-center shrink-0" onClick={(e) => e.stopPropagation()}>
           <ShortcutActionsDropdown shortcut={shortcut} />
         </div>
       )}

frontend/web/src/components/ShortcutsContainer.tsx

@@ -15,7 +15,7 @@ const ShortcutsContainer: React.FC<Props> = (props: Props) => {
   const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;
 
   const handleShortcutClick = (shortcut: Shortcut) => {
-    window.open(absolutifyLink(`/s/${shortcut.id}`));
+    window.open(absolutifyLink(`/s/${shortcut.name}`));
   };
 
   return (

frontend/web/src/pages/CollectionSpace.tsx

@@ -8,6 +8,7 @@ import ShortcutView from "@/components/ShortcutView";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import useCollectionStore from "@/stores/v1/collection";
 import useShortcutStore from "@/stores/v1/shortcut";
+import useUserStore from "@/stores/v1/user";
 import { Collection } from "@/types/proto/api/v2/collection_service";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { convertShortcutFromPb } from "@/utils/shortcut";
@@ -15,6 +16,7 @@ import { convertShortcutFromPb } from "@/utils/shortcut";
 const CollectionSpace = () => {
   const { collectionName } = useParams();
   const { sm } = useResponsiveWidth();
+  const userStore = useUserStore();
   const collectionStore = useCollectionStore();
   const shortcutStore = useShortcutStore();
   const [collection, setCollection] = useState<Collection>();
@@ -30,6 +32,7 @@ const CollectionSpace = () => {
       try {
         const collection = await collectionStore.fetchCollectionByName(collectionName);
         setCollection(collection);
+        document.title = `${collection.title} - Slash`;
         setShortcuts([]);
         for (const shortcutId of collection.shortcutIds) {
           try {
@@ -52,6 +55,8 @@ const CollectionSpace = () => {
     return null;
   }
 
+  const creator = userStore.getUserById(collection.creatorId);
+
   const handleShortcutClick = (shortcut: Shortcut) => {
     if (sm) {
       setSelectedShortcut(shortcut);
@@ -115,6 +120,10 @@ const CollectionSpace = () => {
                 <div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 rounded-2xl shadow-xl">
                   <Icon.AppWindow className="w-12 h-auto mb-2" strokeWidth={1} />
                   <p className="text-lg font-medium">Click on a tab in the Sidebar to get started.</p>
+                  <Divider className="!my-2" />
+                  <p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
+                    Shared by <span className="italic font-medium">{creator.nickname}</span>
+                  </p>
                 </div>
               </div>
             )}

frontend/web/src/pages/ShortcutDetail.tsx

@@ -61,7 +61,7 @@ const ShortcutDetail = () => {
           {favicon ? (
             <img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />
           ) : (
-            <Icon.CircleSlash className="w-full h-auto text-gray-400" />
+            <Icon.CircleSlash className="w-full h-auto text-gray-400" strokeWidth={1} />
           )}
         </div>
         <a
@@ -72,9 +72,11 @@ const ShortcutDetail = () => {
           target="_blank"
         >
           <div className="truncate text-3xl">
-            <span>{shortcut.title}</span>
             {shortcut.title ? (
-              <span className="text-gray-400">(s/{shortcut.name})</span>
+              <>
+                <span>{shortcut.title}</span>
+                <span className="text-gray-400">(s/{shortcut.name})</span>
+              </>
             ) : (
               <>
                 <span className="text-gray-400 dark:text-gray-500">s/</span>

server/version/version.go

@@ -9,10 +9,10 @@ import (
 
 // Version is the service current released version.
 // Semantic versioning: https://semver.org/
-var Version = "0.4.6"
+var Version = "0.5.0"
 
 // DevVersion is the service current development version.
-var DevVersion = "0.4.6"
+var DevVersion = "0.5.0"
 
 func GetCurrentVersion(mode string) string {
 	if mode == "dev" || mode == "demo" {