chore: update slash description

web/src/components/AboutDialog.tsx

@@ -19,7 +19,7 @@ const AboutDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="max-w-full w-80 sm:w-96">
           <p>
-            <span className="font-medium">Slash</span>: A bookmarking and url shortener, save and share your links very easily.
+            <span className="font-medium">Slash</span>: An open source, self-hosted bookmarks and link sharing solution.
           </p>
           <div className="mt-1">
             <span className="mr-2">See more in</span>

web/src/components/CreateShortcutDialog.tsx

@@ -299,7 +299,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                   <Input
                     className="w-full"
                     type="text"
-                    placeholder="Slash - A bookmarking and url shortener"
+                    placeholder="Slash - An open source, self-hosted bookmarks and link sharing solution"
                     size="sm"
                     value={state.shortcutCreate.openGraphMetadata.title}
                     onChange={handleOpenGraphMetadataTitleChange}
@@ -309,7 +309,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                   <span className="mb-2 text-sm">Description</span>
                   <Textarea
                     className="w-full"
-                    placeholder="A bookmarking and url shortener, save and share your links very easily."
+                    placeholder="An open source, self-hosted bookmarks and link sharing solution."
                     size="sm"
                     maxRows={3}
                     value={state.shortcutCreate.openGraphMetadata.description}

web/src/components/DemoBanner.tsx

@@ -14,7 +14,7 @@ const DemoBanner: React.FC = () => {
   return (
     <div className="z-10 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-4xl px-4 flex flex-row justify-between items-center gap-x-3">
-        <span>✨A bookmarking and url shortener, save and share your links very easily.✨</span>
+        <span>✨Slash - An open source, self-hosted bookmarks and link sharing solution✨</span>
         <a
           className="shadow flex flex-row justify-center items-center px-2 py-1 rounded-md text-sm sm:text-base text-white bg-blue-600 hover:bg-blue-700"
           href="https://github.com/boojack/slash#deploy-with-docker-in-seconds"

web/src/components/FilterView.tsx

@@ -21,7 +21,8 @@ const FilterView = () => {
           className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
           onClick={() => viewStore.setFilter({ tag: undefined })}
         >
-          <Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
+          <Icon.Tag className="w-4 h-auto mr-1" />
+          <span className="max-w-[12rem] truncate">#{filter.tag}</span>
           <Icon.X className="w-4 h-auto ml-1" />
         </button>
       )}

web/src/pages/Home.tsx

@@ -23,6 +23,8 @@ const Home: React.FC = () => {
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
+  const [selectedTab, setSelectedTab] = useState<string>("ALL");
+  const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
   const filter = viewStore.filter;
   const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
   const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
@@ -43,6 +45,21 @@ const Home: React.FC = () => {
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-start items-center gap-2 flex-wrap mb-4">
+          {tags.map((tag) => (
+            <Button
+              key={tag}
+              className="hover:shadow"
+              variant="plain"
+              color="neutral"
+              size="sm"
+              onClick={() => viewStore.setFilter({ tag: tag })}
+            >
+              <Icon.Tag className="w-4 h-auto mr-1" />
+              <span className="max-w-xs truncate">#{tag}</span>
+            </Button>
+          ))}
+        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
           <Input
@@ -73,7 +90,7 @@ const Home: React.FC = () => {
             >
               <TabList>
                 <Tab value={"ALL"}>All</Tab>
-                <Tab value={"PRIVATE"}>Mine</Tab>
+                <Tab value={"PRIVATE"}>My Own</Tab>
               </TabList>
             </Tabs>
           </div>